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?

score 6 · Answer 1 · answered Apr 17 '12 at 14:19

6

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

answered Apr 17 '12 at 14:19

Okendoken

416
4
11

3

I hate using absolute positioning but this does seem to be the only way to get this result... terrific example. – Yevgeny Simkin Oct 27 '12 at 02:56
4

Again. THIS WILL NOT WORK IF Content scrolls. – sproketboy Feb 08 '13 at 14:21
And it will also not work if the line of text is wraps into two lines (resizing the window so there won't be enough width to display the line can cause this). – Hoffmann Feb 18 '13 at 18:31

score 5 · Answer 2 · answered Feb 12 '11 at 20:29

5

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

answered Feb 12 '11 at 20:29

Shaz

15,637
3
41
59

2

I like your approach because it is probably good enough to simulate the requirement of the OP, but I wonder: What if the orange div actually has content? That content will be "cut-off" by the `overflow:hidden` when the content of the white part of the container gets larger.... – Bazzz Feb 12 '11 at 21:20
Does NOT work if content overflows. No scrollbar and text expands off the bottom of the browser window. – sproketboy Feb 08 '13 at 14:23

score 0 · Answer 3 · answered Sep 07 '15 at 15:43

This can be done quite elegantly using display: table; without needing to know any explicit height values.

Demo here: http://codepen.io/shanomurphy/pen/jbPMLX

html, body {
  height: 100%; // required to make .layout 100% height
}

.layout {
  display: table;
  width: 100%;
  height: 100%;
}

.layout__row {
  display: table-row;
}

.layout__cell {
  display: table-cell;
  vertical-align: middle;
}

.layout__cell--last {
  height: 100%; // force fill remaining vertical space
}

<div class="layout">
  <div class="layout__row">
    <div class="layout__cell">
      Row 1 content
    </div>
  </div>
  <div class="layout__row">
    <div class="layout__cell layout__cell--last">
      Row 2 fills remaining vertical space.
    </div>
  </div>
</div>

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

3 Answers3

Linked