Hi,
How can I make a div fill up the whole height of the screen?
Imagine a container div, that contains everything in the website. I want to make sure that if the content inside it is smaller than the browser's height, the container stretches to the end of the screen.
Thanks in advance!
Full Version: CSS help
CODE
<style type="text/css">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#my-div {
_height: 100%;
min-height: 100%;
}
</style>
<div id="my-div">Text</div>
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#my-div {
_height: 100%;
min-height: 100%;
}
</style>
<div id="my-div">Text</div>
I believe that should do the trick. IE doesn't support min-height, which explains the hack.
thanks a lot, that did the trick
CODE
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#my-div {
height: auto !important;
height: 100%;
min-height: 100%;
}
padding: 0;
margin: 0;
height: 100%;
}
#my-div {
height: auto !important;
height: 100%;
min-height: 100%;
}
That'd be a bit better, since I think the underscore hack isn't valid CSS.
Keep in mind, that if your content is larger than that of the screen, it will scroll, but your divider will always be the same height as the screen. 
thanks everyone.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.