100% height enzo probleempje

**Jeroen Kamphuis** · 25-11-2008, 16:16

Beste SD'ers,

Ik wil graag een pagina maken waarin ik een header met een bepaalde hoogte zet een menu eronder met bepaalde hoogte dan een content vlak wat de hoogte opvult die er over is nadat de footer eronder geplaatst is. wat er dus voor zorgt dat de hoogte van de pagina 100% is. Word er in het content vlak te veel tekst geplaatst krijg je een scroll bar, maar hoe moet dit? Ik heb rondgekeken op internet kon niet echt iets vinden.

~Jeroen Kamphuis

**Ann Hamers** · 25-11-2008, 16:50

zoek eens op google naar css faux column...

http://www.google.be/search?hl=nl&ne...column&spell=1

Of bedoel je dat in het midden een frame staat? zodat je scrollbars krijgt als de inhoud in de frame te groot gaat worden?

**Jeroen Kamphuis** · 25-11-2008, 16:54

Niet dat ik bedoel van je hebt dus boven je header die heeft een hoogte van 100px bijv. en daaronder heb je een menu van 20 px. en helemaal onderaan de pagina wil je een footer van 30 px. Je wilt in het midden een content vlak hebben. De hele pagina moet altijd 100% hoog blijven en het middelste content vak moet zich uitrekken zodat het de hoogte van browser-150px(header+menu+footer). en als er te veel content in komt moet er een scroll bar komen

**Job Schneider** · 25-11-2008, 17:09

Ik denk dat je de de css overflow property nodig hebt.

**Jeroen Kamphuis** · 25-11-2008, 17:14

Bedankt voor de reacties ik zal later nog eens kijken

**A. IJbema** · 26-11-2008, 14:51

min-height ?

**Jeroen Kamphuis** · 27-11-2008, 15:18

nee dat is het zeker niet;)

**PascalB.** · 27-11-2008, 17:31

Ik zou werken met divs.

Maak 1 container-div met een hoogte van 100 %.
Hierin plaats je vervolgens 1 div's:
1. logo - height: 100px
2. menu - height: 20px
3. content - (geen height)
4. footer - height: 30px

De drie divs waarvan je de hoogte opgeeft behouden zo altijd hun hoogte, terwijl de content-div zich aanpast. Door de container blijft het geheel van div's altijd 100 %. Geef aan de content-div de property overflow: auto; voor de scrollbalk.

Als je er niet uitkomt zal ik vanavond de html en css verder uitschrijven. ik moet nu helaas gaan.
Aanvullend bericht:
Hmm. Ben er nog niet helemaal uitgekomen, maar had ook niet super veel tijd. Misschien dat iemand anders hier de code nog kan aanvullen.

Code:

<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    div.container{
        height: 100%;
        width: 500px;
    }
    div.logo{
        height: 100px;
        background-color: #CCC;    
    }
    div.menu{
        height: 20px;
        background-color: #666;    
    }
    div.content{
        background-color: #999;    
    }
    div.footer{
        height: 20px;
        background-color: #CCC;    
    }
    </style>
</head>
<body>
    <div class="container">
         <div class="logo">LOGO</div>
         <div class="menu">MENU</div>
         <div class="content">CONTENT</div>
         <div class="footer">FOOTER</div>
    </div>
</body>
</html>

**Melvin.Gr.** · 02-02-2009, 11:50

Om in css de hoogte voor divs en tabellen in % te bepalen is er een hack, omdat dit normaal niet werkt.

html, body {
height: 100%;
}

Ik weet niet of je dit bedoeld maar het kan handig zijn...

**René Vennik** · 14-02-2009, 21:53

http://www.rjbasing.reneswebdesign.n...ia/index2.html
Deze footer had hetzelfde probleempje, zie bron code voor oplossing.

100% height enzo probleempje