Header zorgt voor scrolbar
Wat nu dus het probleem is dat er een scrolbar komt omdat hij 75px extra aan de pagina plakt. Snap je? Oftewel, de pagina is 100% + 75px hoog.
Hoe kan ik dat oplossen? Ik neem aan dat hier geen CSS code voor nodig is.
Code (php)
1
2
3
4
2
3
4
<div id="header">Header</div>
<div id="body">
<div class="content">Soep!</div>
</div>
<div id="body">
<div class="content">Soep!</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body {
height: 100%;
padding: 0;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 75px;
background: green;
}
#body {
height: 100%;
background: red;
}
#body .content {
padding-top: 75px;
}
height: 100%;
padding: 0;
}
#header {
position: absolute;
top: 0;
width: 100%;
height: 75px;
background: green;
}
#body {
height: 100%;
background: red;
}
#body .content {
padding-top: 75px;
}
Daarom kun je beter overgaan op de CSS2 trick hiervoor. Dat is door het gebruik van position: absolute. Als je aangeeft left: 0; right: 0; zal de div 100% breed worden, als je aangeeft top: 0; bottom: 0; zal de div 100% hoog worden. Als je nou top: 75px; bottom: 0; gebruikt zal de div vanaf 75px tot aan de bottom van het scherm lopen, en dat is precies wat je nodig hebt.
Een voorbeeldje:
Gewijzigd op 29/10/2011 11:01:58 door Wouter J