De PHPhulp kroeg
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