3(2) paginadelen lopen fout in elkaar

**Rune Laneen** · 10-11-2012, 14:08

Hallo,
ik probeer voor een website een nieuwe layout te maken waar ik 3 delen voor nodig heb, het menu, de pagina en een footerbalk.

De body mag nooit een scrollbar hebben, die moeten apart in div#menu en div#pagina komen (dit kan ik zelf nog wel) maar waar ik niet utigeraak is de hoogte van de twee sections's (rood).

Code:

section#boven {
	width: 100%;
	height: 100%;
}
section#onder {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 45px;
}

Ik heb nu deze code (ik heb er al wat mee gespeeld met margins en paddings enzo maar het werkt nooit) maar deze werkt niet. De section#boven komt altijd onder de #onder te liggen (letterlijk 100% hoog).

Weet iemand hoe ik ervoor kan zorgen dat section#boven niet langer wordt dan de hoogte van <body> - de 45px van section#onder?

Groet,
Rune

**Marcel van Vrouwerf** · 10-11-2012, 15:35

De boel in een wrapper en dan:

Code:

#wrapper		{position:absolute; top:0;bottom:45px;left:0;right:0;}

#menu			{position:absolute; top:0; bottom:45px; left:0; right:0; width:200px;}
#pagina			{position:absolute; top:0; bottom:45px; left:200px; right:0;}
#menu,#pagina		{height:100%; overflow:auto;}

#onder			{position:fixed; bottom:0; height:45px; width:100%;}

Zoiets lijkt mij afdoende.

3(2) paginadelen lopen fout in elkaar