<html>
<head>
<style>
.100PercentHeight{ }
</style>
</style>
<body>
<div class='100PercentHeight'>hihi</div>
</body>
</html>
How can I stretch div to 100% height of page?
Try (it should work in most browsers):
.100PercentHeight, html, body {
height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
height : 100%; /* Internet Explorer treats as min-height. */
min-height : 100%; /* Internet Explorer ignores this. */
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With