Overschot hoogte opvullen door twee divs

[F e r o x]

Hallo,

ik heb 3 divs onder elkaar, die zich bevinden in een 'container'-div. De hoogte van de container is 100%, van de top van de pagina tot de onderkant dus. De middenste div heeft een vaste hoogte van 100 pixels. Nu is het de bedoeling dat de andere twee divs (erboven en eronder) elk even hoog zijn en dus de overige ruimte opvullen van de container.

Mijn begin css-code:

HTML:

body {
    margin: 0;
}
html, body {
    height: 100%;
}
#container {
    height: 100%;
    background-color: black;
}
#top {
    background-color: red;
    height: 50% van (container - 100px);
}
#middle {
    background-color: green;
    height: 100px;
}
#bottom {
    background-color: red;
    height: 50% van (container - 100px);
}

Iemand die weet hoe dit kan opgelost worden in css? Heb al redelijk wat tegen gekomen hier voor het opvullen/uittrekken van divs, maar dit ging dan telkens maar over eentje die hoogte van de lege ruimte moest aannemen.

[DiSiLLUSiON]

Dit is niet mogelijk in CSS, althans, niet op de manier die jij wilt.

Wel kun je #middle verticaal centreren door negatieve margins te gebruiken. Dan kun je de rest relatief positioneren boven, en onder #middle.

[F e r o x]

DiSiLLUSiON schreef op dinsdag 02 december 2008 @ 04:21:
Wel kun je #middle verticaal centreren door negatieve margins te gebruiken. Dan kun je de rest relatief positioneren boven, en onder #middle.

Dit wil ik wel eens proberen. Heb je anders wat (algemene) css-code hoe dit te realiseren valt, want heb al wat zitten testen maar dit lukt me niet echt.

[Verwijderd]

Cascading Stylesheet:

#boven,
#midden, 
#onder {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

#boven {
    bottom:50%;
    background:#F00;
    border-bottom:50px solid #000;
}

#midden {
    top:50%;
    margin-top:-50px;
    height:100px;
    background:#0F0;
    z-index:2;
}

#onder {
    top:50%;
    bottom:0;
    background:#00F;
    border-top:50px solid #000;
}

Werkt alleen niet in IE6 en lager. Kijk maar even of je snapt hoe het werkt.

[Verwijderd]

F e r o x schreef op maandag 01 december 2008 @ 19:30:
(...) De hoogte van de container is 100%, van de top van de pagina tot de onderkant dus. (...)

Realiseer jezelf wel dat een hoogte van 100% in dit geval vrijwel zeker de hoogte van het viewport van de browser wordt, zodat de div ophoudt bij de onderkant van je scherm (de 'fold' zodra je gaat scrollen) als de inhoud van de container hoger wordt dan het browservenster.

[disjfa]

F e r o x schreef op dinsdag 02 december 2008 @ 09:21:
[...]
Dit wil ik wel eens proberen. Heb je anders wat (algemene) css-code hoe dit te realiseren valt, want heb al wat zitten testen maar dit lukt me niet echt.

Daarom is er ook een search hier Zoek eens op faux columns. Daar kom je verder mee dan de oplossing die je nu uitprobeert

[F e r o x]

Verwijderd schreef op dinsdag 02 december 2008 @ 11:04:
Werkt alleen niet in IE6 en lager. Kijk maar even of je snapt hoe het werkt.

Bedankt man! Is echt perfect wat ik wilde. Dat het niet in IE5 en lager werkt vind ik persoonlijk niet erg, IE6 is al iets meer een probleem aangezien die toch wel een stuk wijd verspreider is. Is er een 'omweg' om toch hetzelfde te bereiken bij die browser?

disjfa schreef op dinsdag 02 december 2008 @ 11:53:
Daarom is er ook een search hier Zoek eens op faux columns. Daar kom je verder mee dan de oplossing die je nu uitprobeert

Heb vroeger nog met faux columns gewerkt, maar kon het niet direct inpassen in mijn design hier. Te veel variabele hoogtes, maar misschien heb ik iets over het hoofd gezien.

[Verwijderd]

F e r o x schreef op dinsdag 02 december 2008 @ 14:30:
Bedankt man! Is echt perfect wat ik wilde. Dat het niet in IE5 en lager werkt vind ik persoonlijk niet erg, IE6 is al iets meer een probleem aangezien die toch wel een stuk wijd verspreider is. Is er een 'omweg' om toch hetzelfde te bereiken bij die browser?

Ja, maar dan komen we echt in CSS Black Magic land terecht . Met gebruik van height:expression() (uiteraard non-valid CSS):

Cascading Stylesheet:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#boven,
#midden, 
#onder {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

#boven {
    bottom:50%;
    background:#F00;
    border-bottom:50px solid #000;
    height:expression(this.parentNode.offsetHeight / 2 - 50 + 'px');
}

#midden {
    top:50%;
    margin-top:-50px;
    height:100px;
    background:#0F0;
    z-index:2;
}

#onder {
    top:50%;
    bottom:0;
    background:#00F;
    border-top:50px solid #000;
    height:expression(this.parentNode.offsetHeight / 2 - 50 + 'px');
}

[F e r o x]

Bedank voor het antwoord. Gaat inderdaad al een stukje verder. Zal het direct eens testen.

[Cartman!]

Voor je CSS expressions gaat gebruiken (in feite gewoon Javascript in CSS) lees dit even door:

http://developer.yahoo.ne...07/high_performanc_6.html