Meerdere divs 100% height

Status
Niet open voor verdere reacties.
joris345

joris345

Gebruiker
Lid geworden
12 jan 2008
Berichten
143
Hallo,

Ik zit met een probleempje. Ben bezig met een website die bestaat uit een pagina en met een menu waarmee je kunt switchen tussen bepaalde divs.
Al het content staat zegmaar onder elkaar. Zoiets: klik.

Nu probeer ik elke pagina-div een 100 height te geven. Dus als je dan in het menu aanklikt contact, springt ie naar #contact en zou ik graag alleen die div zien..

Helaas lukt het niet met height: 100%.

Iemand een idee?
 
Hoi Joris,
Bij hoogtes in % moet altoijd aangegeven worden wat de precieze hoogte is waarvan dat percentage genomen moet worden: er wordt gekeken naar het element waar het in zit.
Als dat ook een hoogte in % heeft, moet weer een etage hoger gekeken worden, enz. ...: net zolang tot je bij de <html> bent aangekomen.

Vermoedelijk zal het dan zoiets worden:
HTML: 
...
</head>
<body>
    <div id="page1">...<div>
    <div id="page2">...<div>
    <div id="page3">...<div>
    <div id="page4">...<div>
</body>
</html>
met als css:
Code: 
html {
    height: 100%;
    }
body {
    height: 100%;
    }
#page1,
#page2,
#page3,
#page4 {
    height: 100%;
    }
Verder kan het link zijn om 100% (van de schermhoogte van de bezoeker) op te geven, want wie weet heeft de bezoeker een lage resolutie, en dan heb je kans dat niet alles in de hoogte binnen die 100% past.
Ik zou daarom voor de #page1 enz. een {min-height: 100%;} nemen.

Met vriendelijke groet,
CSShunter
 
Hallo,

Bedankt voor het meedenken! Het is gelukt. Nu heb ik nog een vraag, hoe kan ik nu een background-image laten doorlopen over de 3 pagina divs?
De pagina divs zitten in een div #wrapper.
Als ik het zo doe:

Code: 
#wrapper {
	height: 100%;
	background-image: url(img/bg.jpg);
}

dan zie ik de achtergrond (logischerwijs) alleen voor de schermhoogte.

Nog een idee?
 
Zou misschien wel eens kunnen met het ophangen van het bg-img aan de <body> i.p.v. aan de #wrapper, en dan ook de <body> een {overflow: visible;} geven zodat alles zichtbaar blijft als een pagina-div hoger is dan 100% van het scherm.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan