Div height is not extending to bottom of page

Question

I have a page layout for a website I'm developing that goes something like this:

-------------------------------------Top Bar-------------------------------------
|                                                                               |
---------------------------------------------------------------------------------
--------Content (Has a dark filter that goes over the main background image)-----
------------ Main Content---------------------------|-------------SideBar--------
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
|                                                   |                           |
---------------------------------------------------------------------------------

The in my page is usually a photo that, for design purposes, I need to apply a dark filter. So I create a .content class that serves that purpose, and everything (except for the top bar) goes inside it.

The problem I have is that, when the content in the .main-content container exceeds the page height, the filter does not go to the bottom of the page. I have the .content height at 100%, as well as the body and the html tags.

html {
    font-size: 16px;
    height:100%;
    overflow:auto;
}
body {
    font-size: 62.5%;
    /*10px = 1em*/
    line-height: 1.4;
    width:100%;
    height: 100%;
    min-height: 100%;
    overflow: auto;
}
.top-bar {
    width:100%;
    height:58px;
    position:fixed;
    top:0px;
    z-index: 5;
}
.top-bar.user {
    background-color:rgba(0, 0, 0, 1);
    font-size: 1.2em;
}
.content {
    display: block;
    margin-top: 58px;
    /* = top bar height*/
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.main-content {
    float: left;
    width: 75%;
    height: 100%;
}
.sidebar {
    position: fixed;
    right: 0;
    width: 25%;
    height: 100%;
}

I tried to create the issue here: http://jsfiddle.net/apGgd/3/

Has you can see, as the table expands, the filter (the grey background) does not go along it. However if you remove the 'height:100%' from the .content, the issue goes away.

Answer 1

you just delete height:100%; from the .content section and add an overflow:show;(if the previous is not worked)

Answer 2

The reason it works is when you remove the height:100% is because you don't need to explicitly declare it. What you want is height:auto; min-height:100%;. This will ensure that the height is at least 100%, but will fill the table as needed, which I think is the behavior you want.

Updated jsFiddle