[DIV] Automatisch tot onderkant uitrekken

[gehlan]

Deze vraagstelling is vast al een keer eerder langsgekomen en ik heb ook alles al een beetje doorgelezen + allerlei tutorials artikelen op het net maar kom er nog niet echt uit. Ik hoop dat iemand mij met een (simpele) tip uit de brand kan helpen:
Het gaat om het volgende:

http://img23.imagevenue.c...20876_foot1_122_453lo.JPG

en wil graag het volgende bereiken:

http://img22.imagevenue.c...20881_foot2_122_579lo.JPG

Ik wil dus dat het DIVje 'content' altijd tot de onderkant van de pagina wordt uitgerekt. Het lijkt heel simpel alleen ik heb al verschillende dingen geprobeerd (met een footer, bottom:0, body,html {height:100%} etc) alleen zonder succes.

Ik heb de volgende html-structuur:

<div id="container">
<div id="header"></div>
<div id="menu"></div>
<div id="content">
<div id="kolom1"></div>
<div id="kolom2"></div>
<div style="clear: both;"></div>
</div>
</div>

Bijbehorende CSS:

body
{
background-color:#FF0000;
margin: 0px;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
color: #333333;
height:100%;
}
html
{
height:100%;
}
#container
{
height:100%
}
#header
{
width: 600px;
height: 134px;
margin: 0px auto;
background: url(image.jpg);
}
#menu
{
width: 600px;
height: 30px;
margin: 0px auto;
}
#content
{
bottom:0;
background: #FFFFFF;
width: 600px;
margin: 0px auto;
padding: 2px 0px 0px 0px;
}

Ik hoop dat iemand hier een oplossing voor heeft...

[ Voor 4% gewijzigd door gehlan op 04-01-2007 15:44 ]

[Evilbee]

Als je je div#container nou ook op 100% zet en daar dan de background-color op #ffffff zet zou het moeten werken.

[gehlan]

Evilbee schreef op donderdag 04 januari 2007 @ 15:46:
Als je je div#container nou ook op 100% zet en daar dan de background-color op #ffffff zet zou het moeten werken.

Als ik dit doe:

#container
{
height:100%;
background-color:#FFFFFF;
}

Is de hele achtergrond wit:

http://img20.imagevenue.c...22344_foot3_122_434lo.JPG

[Evilbee]

Oh jah, dan moet je die div#container nog een breedte opgeven en in het midden uitlijnen

[gehlan]

Evilbee schreef op donderdag 04 januari 2007 @ 15:52:
Oh jah, dan moet je die div#container nog een breedte opgeven en in het midden uitlijnen

Bedankt ik heb het werkend gekregen! Voor de nieuwsgierige mensen:

#container
{
width:600px;
margin:0 auto;
background-color:#FFFFFF;
height:100%;
}

[tec]

Denk dat je voor de standard compliant browsers even de height moet verangen voor min-height:100% en dan height:100% in een ie specific stylesheet moet proppen (conditional comments). Anders krijg je meen ik geen scrollbar als je content buiten je window valt.

[ Voor 6% gewijzigd door tec op 04-01-2007 16:24 ]

[Verwijderd]

De height: 100% in geen goede oplossing. Als je namelijk veel tekst op je pagina hebt staan en je krijgt een verticale scrolbalk komt er tekst in het rode te staan. Verklein je browser maar eens tot je een scrollbalk krijgt en scroll naar beneden.

De oplossing die je zoekt: faux columns

[BtM909]

Je kan je code tussen [code=html][/] tags plaatsen wat het overzichtelijker maakt. Dit is ook te vinden in onze FAQ Overzicht van UBB-codes.

Het probleem wat je hier hebt is tot in den treure op dit forum behandeld en ook met google te vinden
Makkelijkste oplossing: kijk naar het antwoord van Par0xysm. Dit topic gaat dicht