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.

This is what I've asked before: http://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height — Bhojendra Rauniyar, Mar 23 '13 at 01:09

score 5 · Answer 1 · answered Mar 22 '13 at 22:15

5

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....

answered Mar 22 '13 at 22:15

hjuster

3,985
9
34
51

If you search Internet, you would probably find that Experts are strictly prohibiting for calculation in CSS. – Airy Apr 30 '14 at 13:01
The expert recommends to make the calculations in CSS, but to create a fallback in js, in case the browser doesn't support css calc... – hjuster Jul 17 '14 at 16:17

score 1 · Answer 2 · answered Mar 22 '13 at 22:15

1

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%;
}

answered Mar 22 '13 at 22:15

Lewis

5,769
6
30
40

score 0 · Answer 3 · answered Mar 22 '13 at 22:20

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; }

Filling remaining vertical space

3 Answers3

Linked