[CSS] divjes 100% hoogte

[robg1984]

ik heb gezocht en zag ergens een schijnbare oplossing welke niet werkt...
ik heb 3 divjes, de onderste en bovenste hebben een vaste hoogte, de middelse moet altijd 100% hebben, hij staat nu op 100% maar doet het niet goed omdat hij te hoog is.. de 3 divjes moeten het scherm vullen...wat is er fout?

zie: http://www.gekkebrabander.nl/extra/test.php

code:

<div id="holder">
    <div id="header">header</div>
    <div id="content">
        <div id="inhoud">inhoud</div>
    </div>
    <div id="footer">footer</div>
</div>

code:

html, body, #holder { 
    min-height: 100%; 
    width: 100%; 
    height: 100%;
}
html>body, html>body #holder { 
    height: auto;
}
body {
    margin: 0px;
    padding:0px;
}
#header {
    background-color:#99FF00;
                width:100%;
    height:218px;
}
#holder {
    position: absolute; top: 0; left: 0;
    width:100%;
}
#content {
    position:absolute;
    background-color:#CC0000;
    width:100%;
    height:auto;
    height:100%;
}
#inhoud {
    margin:20px;
    margin-left:40px;
    font-family:"Trebuchet MS", Verdana;
    font-size:12px;
    height:auto;
}
#footer{
    width:100%;
    height:25px;
    position: absolute;
    bottom: 0;
    background-color:#FF9900;

}

[MBV]

Hij is toch 100%? 100% van de hoogte van je scherm, maar begint lager

Dit werkt bij mij in firefox:

Cascading Stylesheet:

#content {
    position:absolute;
    background-color:#CC0000;
    width:100%;
    height:auto;
    top:218px; 
    bottom: 25px;
}

Je containing block, in dit geval 'holder', is zo groot als het hele scherm. Je header is 218px, dus t.o.v. je containing block moet je 218px lager beginnen -> top: 218px.
Je containing block loopt door tot de onderkant van je scherm. Je wilt dit block laten doorlopen tot je footer die 25px hoog is -> bottom: 25px
En hij moet zo hoog zijn dat hij die ruimte opvult -> height: auto

[robg1984]

MBV schreef op zaterdag 14 oktober 2006 @ 13:54:
Hij is toch 100%? 100% van de hoogte van je scherm, maar begint lager

Dit werkt bij mij in firefox:

Cascading Stylesheet:

#content {
    position:absolute;
    background-color:#CC0000;
    width:100%;
    height:auto;
    top:218px; 
    bottom: 25px;
}

Je containing block, in dit geval 'holder', is zo groot als het hele scherm. Je header is 218px, dus t.o.v. je containing block moet je 218px lager beginnen -> top: 218px.
Je containing block loopt door tot de onderkant van je scherm. Je wilt dit block laten doorlopen tot je footer die 25px hoog is -> bottom: 25px
En hij moet zo hoog zijn dat hij die ruimte opvult -> height: auto

Bedankt! Dit werkt in FireFox, maar niet in IE, hoe kan ik het voor IE oplossen?

[MBV]

daar heb ik geen simpele debugger voor, die on-the-fly css kan veranderen. Ik denk dat je in javascript kunt zien dat hasLayout false is. Er zijn diverse trucs om dat te omzeilen, kijk bijv eens op www.positioniseverything.net ofzo

edit:
hmm, hasLayout is het probleem niet, waarschijnlijk een van de andere 100 bugs in IE

[ Voor 13% gewijzigd door MBV op 14-10-2006 15:00 ]