footer til og holde seg på bunn?

[phax]

morn, prøver lærer meg css her.. fikk kommet meg gjennom mitt første problem som var og få 100% høyde, men nå har jeg da støtt på et nytt hinder.

 

klarer ikke få footer'n til og legge seg på bunn!

 

container div er som sagt 100% og planen var at så lenge det ikke var nok innhold til og fylle browser vinduet så skulle footer'n likevel ligge på bunn.

 

 

 

slik vil jeg ha det:
______________________
|______header_________|
|         |                          |
|         |                          |
| meny| innhold               |
|_____|_______________|
|         |                          |
|         |                          |
|_____|_______________|
|_______footer_________|

men slik ser det ut:
______________________
|______header_________|
|         |                          |
|         |                          |
| meny| innhold               |
|_____|_______________|
|_______footer_________|
|         |                          |
|         |                          |
|_____|_______________|

 

steike bra forklaring?

[halvardm]

Nei

Kan du legge ut CSS fila?

[LoS]

Skjønner akkurat hva du mener, for den funker bra i IE ikke sant?

isåfall:

#footer { min-height: 100%; }

* html #footer { height: 100%; }

Hvis jeg ikke husker feil.

[Purify]

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

[halvardm]

@Purify:

Da vil den holde seg nede over innholdet hvis du har mer innhold enn man kan vise uten å bruke scrollen. Var det sånn han ville ha det da?

[phax]

purify, fikk den koden til og funke, delvis.

 

det blir sånn som skomaker'n sier, footer'n legger seg nede over innholdet, og det var egentlig ikke slik jeg hadde håpet på!

 

begynner nesten og vurdere å lage en annen løsning, og bare drite i og ha footer'n i bunn når det er for lite innhold.

[g0mpen]

Har du en div som fungerer som "container" eller "wrapper"? Altså en stor som ligger rundt hele siden?

 

 #container {
position: relative;
width: 700px; /* denne kan selvsagt byttes */
}
#footer {
position: absolute;
bottom: 0;
height: 20px; /* kan byttes */
}
#innhold {
padding-bottom: 20px; /* 20px er tilsvarende høyde på footer, slik at footer ikke skal legge seg over innholdet */
}

 

Dette forutsetter at du har en divisjon med navn "innhold" som ligger inni "container", men over "footer".

 

<div id="container">

<div id="innhold"><h1>innhold her</h1></div>

<div id="footer">Footer her</div>

</div>

 

Håper du forstår hva jeg mener her

Endret 21. oktober 2004 av g0mpen