[CSS] Div zo lang als inhoud / Div over hele hoogte scherm

De lay-out van www.jankoehoorn.nl is zo. Wel een paar CSS hacks voor nodig trouwens.

Ik kan niet zien hoe je het gedaan hebt...

Dit is de CSS waar het om gaat:

html, body {
	height: 100%;
}

#container {
	position: relative;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}

html>body #container {
	height: auto;
}

Ik kom er écht niet uit. Ik heb deze code:

<?php


<div id="box">
	<div id="header">
		<h1>Titel</h1>
	</div>
	<div id="main">
		<div id="menu">
			<ul>
				<li><a href="#">Menuitem 1</a></li>
				<li><a href="#">Menuitem 2</a></li>
				<li><a href="#">Menuitem 3</a></li>
			</ul>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dui neque, fringilla a, euismod et, tincidunt eu, urna. Cras mauris lacus, mollis et, hendrerit eget, tincidunt nec, lorem. Vestibulum urna. Nam ultrices eleifend nunc. Curabitur et lorem nec lorem viverra aliquet. Nulla nisl. Sed sed urna tempus tellus tincidunt fermentum. Morbi dui risus, eleifend quis, congue sed, blandit vel, lectus. Donec vitae ligula vel est nonummy cursus. Nam tellus. Nulla facilisi. Vestibulum vulputate turpis ut dui. In dapibus, pede eget viverra pharetra, justo erat imperdiet nunc, nec tempor arcu arcu in mauris. Morbi ultricies tristique mauris. Nam a ligula. Praesent porttitor ipsum non orci fringilla lobortis. Phasellus tortor neque, nonummy quis, lobortis et, pellentesque sed, elit. Donec volutpat augue ac mauris. Quisque ac nibh sed lacus malesuada bibendum. Cras turpis orci, tempor vel, pretium id, hendrerit in, libero.</p>
		</div>
	</div>
</div>


?>

<?php


html,
body
{
	height: 100%;
}

#box
{
	width: 780px;
	height: 100%;
	margin-left: -400px;
	position: absolute;
	left: 50%;
	padding: 10px;
}

#header
{
	width: 100%;
	height: 123px;
}

#main
{
	width: 100%;
	//Hier zit het?
	height: ???;
	//Hier zit het?
}

#menu
{
	width: 175px;
	height: 100%;
	float: left;
}

#content
{
	width: 590px;
	height: 100%;
	float: right;
}


?>

Ziet iemand het probleem???
[edit]Codetags voorkleurtjes[/edit]

Jan Koehoorn schreef op 25.10.2006 21:07

De lay-out van www.jankoehoorn.nl is zo. Wel een paar CSS hacks voor nodig trouwens.

Volgens mij wil Jonathan dat je niet de rechter scrollbalk hebt (die ik bij jou wel zie) maar dat alleen de content div die scrollbalk krijgt, en voor de rest dat die wel schermvullend is ;)
Zoals ik jou site zie is dat niet het geval.

Hier wel, denk dat je het hier wel uit moet kunnen halen.. (het werkt met een Iframe in een div, maar daar kom je zelf nog wel uit denk ik)

@Robert: idd, ik wil een scroolbar bij de content div, en niet het geheel.

Hier wel

Waar wel?

Sorry :S Niet helemaal goed gegaan :(

http://curacao.robertdeiman.net

(let niet op de spam in gastenboek btw, de site wordt toch gewist, dus geen zin meer om er een filter op te zetten)

scrollbalk bij content div is toch heel simpel met overflow: auto; ??

Maar de hoogte van de main lukt niet

ik heb ff voor je zitten klooien, maar ik krijg het ook niet voor elkaar.
ik heb wel een hoofdvraag voor je weten formuleren.

is het mogelijk een relatieve hoogte div te voorzien van een overflow.

ik heb het ontwoord ook nog niet gevonden?

<?
*{
margin:0;
padding:0;
}
html, body {
height: 100%;
}

#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
width:75%;
margin:auto;
background:pink;
overflow: auto;
}

html>body #container {
height: auto;
}
#header{
height:100px;
background:red;
overflow: auto;
}
#content{
overflow: auto;

}
?>