Legge footer nederst uavhengig av skjermstørrelse

[G2Petter]

Hei.

Jeg har ei side hvor strukturen er omtrent sånn:

 

<div id="wrapper">

<div id="header">

</div>

<div id="content">

</div>

<div id="footer"

</div>

</div>

 

Nå kommer alle divene i rask rekkefølge, men hvordan kan jeg sørge for at footeren kommer helt nederst på sida, uansett om skjermen er full av content eller ikke?

#wrapper er midtstilt og med fast bredde

 

Hilsen Petter

[Svinat]

Prøv

    position: absolute;
    bottom: 0;

på #footer.

[G2Petter]

Det var det jeg også trodde skulle fungere, men da legger den seg helt nederst til venstre, noe som ikke er bra siden hele designen er midtstilt, og det er en del luft på hver side av #wrapper

[Svinat]

Prøv denne da:

    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0 0 0 -400px;

 

På -400px, tar du halvparten av bredden på footeren istedenfor 400. Husk å ha - foran.

Endret 21. april 2007 av Svinat

[G2Petter]

Nei, det fungerte ikke det heller. Den ble midtstilt sånn at starten av footeren ligger på midten, men den reagerer ikke på margin, uansett om jeg prøver positive eller negative tall.

[tehextinct]

hørtom

Clear: both; ??

 

<div id="header">

</div>

<div id="wrapper">

<div id="content">

</div>

<div class="clear: both">

</div>

</div>

<div id="footer"

</div>

 

Noe slikt? lol bruker d på mie sider.

[haugsand]

html, body, #wrapper {
 min-height: 100%;
}

#wrapper {
 position: relative;
}

#footer {
 position: absolute;
 bottom: 0;
}

Det trengs noen tweaks for å få høyden til å fungere i IE.

[G2Petter]

html, body, #wrapper {
 min-height: 100%;
}

#wrapper {
 position: relative;
}

#footer {
 position: absolute;
 bottom: 0;
}

Det trengs noen tweaks for å få høyden til å fungere i IE.

8438250[/snapback]

Det fungerte heller ikke. Footeren ble liggende nederst til venstre.

[haugsand]

Jeg limte inn en generell løsning på problemet. Det er vanskelig å komme med noe mer presist så lenge du ikke viser til et eksempel.

[G2Petter]

Her er linken. Det jeg i den forenkla fremstillinga mi har kalt #footer er den div-en som heter #credits

[haugsand]

Det eksisterer jo ingen #wrapper i koden din. Så lenge #wrapper er midtstilt med riktig bredde, vil mitt eksempel fungere.

[G2Petter]

Jeg hadde klart å fjerne den i et annet forsøk på å få det til å fungere, og så glemte jeg å legge den tilbake igjen.

 

Uansett: nå er #wrapper på plass, og den er midtstilt med

margin: 0px auto 0px;

 

Det som skjer hvis jeg bruker koden er at den legger seg over "meta"-delen, der det nå står "Filed Under Uncategorized | 1 Comment".

[Håvard]

hvis du legger inn "margin:0 auto;" på footer-diven vil den komme i midten av siden

[Torjus]

http://bza.no/100-prosent-hoyde-med-css/

 

http://bza.no/test/markup/html/100prosent/test05.html

[G2Petter]

http://bza.no/100-prosent-hoyde-med-css/

 

http://bza.no/test/markup/html/100prosent/test05.html

8438959[/snapback]

Tusen takk

Det eneste problemet nå, er at halve footeren forsvinner ut av 100% i IE7 så jeg må scrolle litt. Ellers vet jeg ikke om det er problemer med IE6, for det har jeg ikke.

 

Takk for hjelpa, folkens. Ha en fortsatt fin lørdagskveld.

[punktum]

Hei.

 

Hvis du fremdeles er interessert så e det en utmerket løsning her som virker. Jeg bruker den selv.

 

http://ryanfait.com/sticky-footer/

 

Det som er viktig her er å sette en negativ margin slik at du flytter footeren opp i de forskjellige nettleserene slik at den blir liggende på bunnen. Samtidig må du gi wrap/content eller hva du no har teksten din i en padding på ca tilsvarende størrelse som den negative marginen din. Da unngår du at teksten forsvinner vekk..

 

Håer det var til hjelp