How to make a DIV fill the remaining vertical space of the browser window?

Question

I have this simplified code:

This is a line of text<br/>
<div style="background-color: orange; height: 100%">And this is a div</div>

The div height ends up being 100% of the height of the browser window client space, which summed up with the height of the text line, is more than the window height, so you have to scroll.

How can I make the div height so it takes the height of the browser window minus the line of text?

Or, in other words, how can I make the div take all the free space vertically regarding what other DOM objects already occupy?

Answer 1

I met the same problem too. Here is the solution I found:

<style>
.container{
    position: relative;
    height: 100%;
}
.top-div{
    /* height can be here. if you want it*/
}
.content{
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1em; /* or whatever height of upper div*/
    background: red;
}
</style>
<div class="container">
    <div class="top-div">This is a line of text</div>
    <div class="content">And this is a div</div>
</div>

source - http://www.codingforums.com/archive/index.php/t-142757.html

Answer 2

Ultimately, you will want to have a container. "overflow: hidden" will hide anything that overflows the container. If we didn't use that then we would see the problem you mentioned above about "...is more than the window height, so you have to scroll".

  <div id="container" style="color:white;height:500px;background-color:black;overflow:hidden;">
    This is the container
    <div style="height:100%;background-color:orange;">
      This div should take the rest of the height (of the container).
    </div>
  </div>

Example with overflow hidden: http://jsbin.com/oxico5

Example without overflow hidden: http://jsbin.com/otaru5/2