<html>
<head>
<style>
.100PercentHeight{ }
</style>
</style>
<body>
<div class='100PercentHeight'>hihi</div>
</body>
</html>
How can i stretch div to 100% height of page?
views:
655answers:
8
A:
<style type="text/css">
html, body, .100PercentHeight {
height: 100%;
margin: -10px 0px 0px -10px; } </style>
This should work. however you may want to add a background colour or border to make sure it works, else you wont be able to see properly.
Oliver Stubley
2009-06-04 16:44:55
Thanks... i always colored borders to see.
uzay95
2009-06-04 16:51:38
Edited in html and body, never used them myself and it seemed fine, however others seem insistent it is needed, down voted me for it too, which is a bit vain.
Oliver Stubley
2009-06-04 16:53:31
@Oliver, the code you've provided will result in `.100PercentHeight` starting 30px above the viewport (and 30px left of it as well, but that's outside the scope of the question). Presumably that is left over from before you added `html` and `body` selectors, but even so it is unwise to use margins this way. Better to explicitly set the margins of `html` and `body` so that you know them (there is no defined default stylesheet, even of `body { margin: 10px }` is fairly common (and it may not be).
eyelidlessness
2010-05-02 11:53:31
+1
A:
You should set 100% height for the body and it should do:
body { ... height:100%; ... }
fixed
2009-06-04 16:46:20
+5
A:
Applying
html, body, .100PercentHeight{
height:100%;
}
should yield the effect you're looking for. You need it on all three.
However, it often doesn't actually do what you think it might, and can be problematic. Faux-column techniques or "sticky footers" tend to work better.
Gabriel Hurley
2009-06-04 16:47:23
+1
A:
This will work, as an example.
<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
test
</div>
Michael Todd
2009-06-04 16:47:27
It seemed alright in IE 8 and Firefox. What would make it not work?
Michael Todd
2009-06-04 17:00:31
Ah. You wanted it flush against the browser sides, with no white space. Got it. Tweaks are needed in that case.
Michael Todd
2009-06-04 18:41:19
+1
A:
{ position: absolute; top: 0px; botton: 0px; padding: 0px; margin: 0px; }
This way it will be centered and cover the page if it is longer than one browser view long.
stevedbrown
2009-06-04 16:48:52
Two notes: 1) IE 6 does not support opposite dimensions (eg `top` and `bottom`) and will ignore the dimension furthest from the top-left corner. 2) Even in other browsers, this element will still only absolutely fill its parent elements, and strictly speaking both `html` and `body` default to be flexible-height according to the box model (with some display exceptions for backgrounds).
eyelidlessness
2010-05-02 11:56:55
+2
A:
Try (it should work in most browsers):
.100PercentHeight, html, body {
height : auto !important; /* ignored by IE, applied everywhere else */
height : 100%; /* IE treats as min-height */
min-height : 100%; /* IE ignores this */
}
eKek0
2009-06-04 16:49:01
you'll still need to set a height on <html> and <body> - for IE at least.
Triptych
2009-06-04 16:50:25
+1
A:
If you want to do it via JavaScript this code should work for most DOM browsers...
<div id="fullDiv" style="border: solid 2px black;">
Hello example
</div>
<script type="text/javascript">
var div = document.getElementById('fullDiv');
div.style.height = document.documentElement.clientHeight + 'px';
</script>
Chalkey
2009-06-04 17:10:42