Filling remaining vertical space

Question

Redesigning my website, in my CSS I have a div of height: 200px; then an image under it with a height: 532px; then lastly a div of height: 100%;.

The last div is not filling the rest of the page, is there something I'm doing wrong?

P.S. - All divs are in a container. All containing divs have height: 100%;

I have since changed it, so I no longer require this.

Answer 1

First, you need to set the height of html and body to 100%. Then if you want to cover the rest of the page with that div you should do something like:

div{
     height: -moz-calc(100% - 732px); //732 = 200 + 532
     height: -webkit-calc(100% - 732px);
     height: calc(100% - 732px);
}

Hope this will help....

Answer 2

You really need to post your html.

I suspect that the problem you are having though could be solved by setting the height of the html and body tags to be 100% too. Like :

html, body{
  height:100%;
}

Answer 3

If the div did indeed obey the height: 100%, it would have the same height as the container, conflicting with the elements above it.

Without using Javascript to compute the height, or note widely supported modern CSS extensions, you must fall back to absolute positioning. The only down side is you must manually enter the top of it.

http://jsfiddle.net/NnD2u/

<div class="container">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

.

.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }

.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }