Header zorgt voor scrolbar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Scripter

PHP Scripter

29/10/2011 00:04:05
Quote Anchor link
Ik zit met een probleem waar ik nog steeds geen oplossing voor heb. Wat is de situatie? Mijn header is 75px hoog. Daaronder heb ik een linker en rechter column met beide de hoogte van 100%.

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.
 
PHP hulp

PHP hulp

29/03/2024 10:14:09
 
Ozzie PHP

Ozzie PHP

29/10/2011 00:15:22
Quote Anchor link
de hoogte van 100% weghalen?
 
PHP Scripter

PHP Scripter

29/10/2011 00:35:39
Quote Anchor link
Nee, want dan lopen de weel columns niet meer tot onderaan de pagina.
 
Jelmer -

Jelmer -

29/10/2011 00:46:15
Quote Anchor link
Wat je kan doen is je header met position:absolute aan de bovenkant vastplakken, dan valt hij over je kolommen heen in plaats van dat hij ze naar beneden duwt. In je kolommen zorg je dan met margin of padding of nog een element daar weer in met margin of padding dat je inhoud pas 75px naar beneden begint. (voorbeeldje)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div id="header">Header</div>
<div id="body">
    <div class="content">Soep!</div>
</div>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
 
PHP Scripter

PHP Scripter

29/10/2011 01:57:28
Quote Anchor link
Jelmer, dat heb ik dus ook al geprobeerd, maar ook dan komt er dus 75px aan op de #body omdat hij de hoogste dus ook weer 'hoger' maakt als ik padding-top gebruik.
 
Wouter J

Wouter J

29/10/2011 10:57:08
Quote Anchor link
Je kan CSS3 calc gebruiken, alleen de browser support is daarvan nog niet heel geweldig.

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: http://cssdesk.com/raLnN (cssdesk doet een beetje vreemd vandaag, even overgaan op http://tinkerbin.com/NTN66QkZ )
Gewijzigd op 29/10/2011 11:01:58 door Wouter J
 
PHP Scripter

PHP Scripter

29/10/2011 17:25:16
Quote Anchor link
Wouter, bedankt! Op jouw manier is het gelukt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.