PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
/

css: hoogte van 100%

Door /home/joost op 04-01-2009 21:42
785 views
ik heb dit als css:
div.container {
height: 100%;
width: 900px;
background-color: #FFFFFF;
text-align: center;
}

Alleen dit geeft geen container met een hoogte van 100%, hier de url: klik.

mvg Joost.
Joren de Wit
04-01-2009 21:51
Het probleem is dat je een tabel voor je layout gebruikt. Zo te zien heb je een tabel met daarin een aantal divs? Je kunt je divs dan wel een hoogte van 100% geven, maar daarvan zal die tabel echt niet uitrekken.

Sterker nog, die tabel zal helemaal niet lekker meewerken, hij is immers ook niet bedoeld voor je layout. De eerste stap naar de oplossing is dan ook om die tabel helemaal uit je website te slopen ;-)
/
/home/joost
04-01-2009 22:03
Hoe kan ik dan het beste de div zelf (niet de inhoud dus) in het midden uitlijnen ??

mvg Joost.
Joren de Wit
04-01-2009 22:07
Probeer:

#je_div {
  width: 900px;
  margin: 0 auto;
}

Door de linker en rechter margin van je div op auto te zetten en hem een vaste breedte mee te geven, wordt hij in het midden van je pagina uitgelijnd...
/
/home/joost
04-01-2009 22:18
Ik heb nu:


div.container {
	height: 100%;
	width: 900px;
	background-color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}


Hierbij bleef er iets ruimte over, maar wanneer ik de body op een margin 0 zette was dit weg, maar nu wil ik dat hij altijd 100% hoog is, en dat de content div een auto scrollbalk krijgt, die auto scrollbalk lukt me wel dmv css, maar die altijd 100% hoogte van de container div, hoe doe je dat ??

mvg Joost.
Joren de Wit
04-01-2009 22:29
Voorbeeldje:

<html>
<head>
<style type="text/css">
#mijnDiv {
	width: 900px;
	margin: 0px auto;
	height: 100%;
	background-color: #cf9;
}
</style>
</head>

<body>
<div id="mijnDiv"></div>
</body>
</html>
/
/home/joost
04-01-2009 22:43
Ik gebruik de volgende code(s):

CSS:

body {
	background-image: url(../images/background.gif);
	font-family: "MS Sans Serif", Geneva, sans-serif;
	font-size: 11px;
	margin: 0px auto;
}
#container {
	height: 100%;
	width: 900px;
	background-color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}


HTML:

<div id="container">.... -> rest......</div>


En dit is nu mijn output:

klik 1
klik 2

Klik 1 is de inhoud kleiner dan grootte content div, scroll balk niet te zien, goedzo, alleen niet tegen onderkant uitgeleind....

Klik 2 is de inhoud groter, scrollbalk is te zien, goezo, alleen niet tegen onderkant uitgeleind....

Klik 1&2, bijde goed tegen bovenkant uitgeleind, bijde niet goed onderin uitgeleind.

mvg Joost.
Joren de Wit
04-01-2009 22:58
Het probleem zit hem in het feit dat je de divs, die je binnen je container div plaatst, een float meegeeft. In plaats van ze daadwerkelijk in je container div te plaatsen, laat je ze er nu in zweven...

Mijn tip: begin nog eens van voor af aan met een container div met een 100% hoogte (zie mijn voorbeeld). Ga vervolgens de rest van je website binnen deze container plaatsen en gebruik daarbij zo min mogelijk floats. Die heb je helemaal niet zo vaak nodig als je wellicht zult denken.
/
/home/joost
04-01-2009 22:59
Ja, dat dacht ik, anders komen ze onder elkaar, maargoed dan zal ik morgen even opnieuw alles erin zetten, ga nu wel naar bed (morgen weer school :().

mvg Joost.
P
PHP Newbie
04-01-2009 23:03
Wanneer je een div 100% hoogte wilt hebben zul je ook

html,body { height: 100%; }

toe moeten passen.
M
Mitchell
05-01-2009 11:24
100% hoogte is nogal een buggy onderwerp, vooral wanneer je het over crossbrowser hebt.

Zo wie zo moeten al je parent elementen van je div 100% hebben, zoals PHP Newbie al zei.

Ook zal een background op je body/html niet werken, aangezien IE's background 0,0....etc....1% afwijkt van die van de andere browsers, hier bestaat ook (nog) niet echt een GOEDE oplossing voor.

Zelf sta ik ook nog steeds op een goede oplossing te wachten (die crossbrowser is) voor dit probleem.

Reageren

Inloggen om te reageren