Sections 100% height onder elkaar
- Onderwerp starter MrHook
- Startdatum
- Status
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi MrHook,
Ik zou zo zeggen:
Met in de css:
Met vriendelijke groet,
CSShunter
Ik zou zo zeggen:
HTML:
<body>
<h1>Secties van 100% hoog</h1>
<div class="sectie">
<h2>Lorem<h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ...</p>
</div>
<div class="sectie">
<h2>Praesent<h2>
<p>Praesent placerat bibendum dui at aliquet. Morbi sapien justo, ...</p>
</div>
<div class="sectie">
<h2>Et harum<h2>
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, ...</p>
</div>
</body>
</html>
Code:
html {
height: 100%;
}
body {
height: 100%;
overflow: visible;
}
.sectie {
height: 100%;
overflow: auto;
}- Om een hoogte van een % te bereiken, moeten alle omvattende elementen (t/m de <html> zelf) ook een gedefinieerde hoogte hebben. Hier dus: de <body> en de <html>.
- Als je wilt kunnen doorscrollen naar de volgende sectie, mag de 100% hoge body niet alles afkappen wat onder de onderrand van het scherm zit: {overflow: visible;}.
- De inhoud (= intern nodige hoogte voor de tekst e.a. onderdelen) kan per sectie verschillen, evenals de schermhoogte van de bezoeker (die afhankelijk is van diens resolutie resp. browservenster-hoogte).
Om de secties op schermhoogte te laten staan en toch de inhoud altijd te kunnen zien, komt er zo nodig een inwendige rechter scrollbar naast een sectie om de hele inhoud van die sectie te kunnen zien: {overflow: auto;}. - NB: de secties mogen geen padding-top en/of padding-bottom krijgen, want die worden bij de hoogte opgeteld: en dan zou het meer dan 100% worden!
Met vriendelijke groet,
CSShunter
- Status
