Footer der forbliver i bunden

30-11-10 brianbrandt 3 kommentarer

At lave design der virker crossbrowser, kan til tider være lidt af en opgave. Tit er det de små marginaler der gør en forskel – og andre gange er man nød til oprette et individuelt stylesheet, der refererer specifikt til en bestemt browser.

Jeg stødte forleden på lidt af en opgave, da jeg skulle formå at lave en footer der forblev i bunden, ligegyldigt hvilken højde den øvrige side havde. Det tog sin tid at knække den nød, og jeg har derfor valgt at dele den metode jeg nåede frem til, i håb om folk kan nyde godt af det ved en senere lejlighed.

Problemet

Nu skriver jeg godt nok “Problemet”, men for de fleste hjemmesider er dette ikke et problem, da der for det meste er nok indhold til at fylde et helt skærmbillede. Men er det ikke tilfældet, vil din hjemmeside højest sansynlig se ud som eksemplet forneden.

Løsningen

Vi starter ud med at bygge det grundlæggende HTML op. Sørg for at alt er inden for #wrapper. Undtagen #footer
Dit HTML vil derefter se således ud.

Content

Nu hvor det grundlæggende HTML er på plads, så lad os kigge lidt på CSS-delen.
Først bliver vi nødtil at definere body og html tags med en height100%. Det gøres således.

html, body {
     height: 100%;
}

Når det er gjort, skal vi have fat i vores #wrapper. Her definere vi en min-height100%, og en margin-bottom-200px. Som det sidste sætter vi position til relative.

#wrapper {
    min-height: 100%;
    margin-bottom: -200px;
    position: relative;
}

Grunden til vi sætter margin-bottom til -200px, er for at overskrive footeren (som vi kommer til om lidt). Normalt er minus-værdier lidt af et tabu, og jeg bruger det sjældent da det kan giver problemer i de forskellige browsere. Så hvis det kan undgås, hold jer fra det.

Nu skal vi så have fat på footer. Vi starter med at definere height til 200px. Derefter sætter vi position til relative. Det vil se cirka sådan her ud.

#footer {
    height: 200px;
    position: relative;
}

Nu skulle man tro vi var færdig. Vi har defineret de forskellige punkter, udlignet minus værdierne, og positioneret elementerne. Men for at denne metode skal virke, er der endnu en lille ting vi skal ordne først. Der er tale om et såkaldt fix eller et hack. Dette er endnu en af disse FY FY-metoder, som folk tyr til, for at gøre et site crossbrowser-compatible. I dette tilfælde, er det for at udligne bunden, så den ikke overskriver vores indhold på siden.

Først opretter vi endnu en div inde i vores #wrapper. Den div giver vi en class som vi kalder for clearfooter.

Content

Derefter åbner vi vores stylesheet og tilføjer definerer clearfooter. Vi ligger ud med at give den samme height som vores footer (200px). Dernæst clear:both for at reset enhver float-værdi.

.clearfooter {
     height: 200px;
     clear: both;
}

Du skulle nu have en footer som forbliver i bunden.

Denne løsning virker i alle browsere (Internet Explorer 7.0 og op efter).



Discussion

  • Casper Reiff

    Nice one Martin.
    Det er som løsningen på rubiks terning.

    30-11-10
  • lars

    Hej

    Eksemplet virker ikke … ville ellers gerne se det 🙂

    Mvh Lars

    30-11-10
    • admin

      Hej Lars,

      Tak fordi du så det 🙂
      Eksemplet virker ikke på vores nye site, men jeg forsikrer dig for, at metoden virker 😉

      30-11-10

    Der er lukket for kommentarer