Hi,
Is there a way to instruct a div to fill 100% of the available page height, until it gets enough content to require a scrollbar?:
// browser height: 600px:
<div>
// empty, so just be 600px tall.
</div>
....
// when it gets content and gets taller than
// the page, don't need to auto-height itself
// anymore.
<div>
<ul>
<li></li>
<li></li>
...
</ul>
</div>
is there any sort of style that can make that happen, or does this need to be done with javascript?
Thanks
<!doctype html>
<html>
<head>
<style>
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
div#page {
background:#333;
min-height:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="page"></div>
</body>
</html>
Feed height:100% to IE6 if you care about it in a conditional.
Have a look at min-height. Not supported in older versions of IE, but should do what you want. http://www.w3schools.com/CSS/pr_dim_min-height.asp
in your CSS, do you have html, body set to {height: 100%}
This is hands down the easiest way to do what you're looking for:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo</title>
<style type="text/css" media="screen">
#content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: auto; }
</style>
</head>
<body>
<div id="content">
<p>Embed all your content here.</p>
</div>
</body>
</html>
Alternatively if you want to support older browsers you could do this instead:
#content { position: absolute; top: 0; left: 0; height: 100%; overflow: auto; width: 100%; }