Archief - DIV met relatieve hoogte

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Bolteh

Legacy Member
Hoi!

Ik zit hier met een site waarin er een DIV moet geplaatst worden die op 230 pixels van de bovenste rand begint en dan de resterende hoogte van het venster opvult, buiten de laatste 20 pixels aan de onderkant. Horizontaal staat de site in het midden van het scherm.

Dit is als standaard scherm dus, maar als er content in komt die langer is dan de maximum hoogte, dan moet je kunnen scrollen etrwijl de onderkant nog altijd 20 pixels van de rand blijft (als je snapt wat ik hier mee bedoel, dan).

De code die ik hiervoor gebruik op de moment, is deze:
Code:
#ContainerDiv {
	width: 300px;
	height: 100%;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	margin-top: 230px;
	margin-bottom: 20px;
}

Maar die werkt dus niet, de browser toont een scrollbar (wat dus niet duidt op effectieve uitvulling van de maximum hoogte. Ik vermoed dat de browser gewoon kijkt hoe hoog het browser venster nu echt is (in pixels) en dat gebruikt voor die 100%, die waarde neemt hij dan en voegt er 230 pixels aan toe en trekt er dan 20 pixels van af (denk ik, natuurlijk).

Dank bij voorbaat.

mpolo

Legacy Member
Hoop dat dit een beetje is wat je zoekt

je hebt dus 2 opties ofwel maak je nog een div of wel zet je er padding op

Code:
<div id="container">
<div id="top">top</div>
<div id="main">main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br></div>
</div>

Code:
#container{
width:100%;
height:100%;
background-color:#FFFF00;
}
#container #top{
height:230px;
margin:0 auto;
width:750px;

background-color:#FF66FF;
}
#container #main{
margin:0 auto;

padding-bottom:20px;
height:100%;
width:750px;
background-color:#CCFF00;
}


of

Code:
<div id="container">
<div id="main">main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br></div>
</div>

Code:
#container{
width:100%;
height:100%;
background-color:#FFFF00;
}

#container #main{
margin:0 auto;
padding-top:230px;
padding-bottom:20px;
height:100%;
width:750px;
background-color:#CCFF00;
}
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan