Question

I’d like to have a div called “content” which starts at the top of the page and extends down to the bottom, even when there’s no other content. I’m trying to figure out how to do this using very simple CSS, so I can implement it on my existing site. Here’s the code I’ve been playing with:

html {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
body {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

}
#content
{
    position: relative;
    top: 0;
    margin: 0 auto;
    border: 1px solid red;
    width: 70%
}

This will make a div, but it ends up being pretty much just a red line at the top of the screen. If I add height: 900px; then it will work, but I’m trying not to use specific measurements.

Answer 1

Use min-height:100% so that it can grow if it has to, and remove all other rules (they’re not doing anything).