How to make a div take the remaining height

You would think that such a basic problem would be solved within seconds of try and error or after a small trip to our favorite search engine.

But i personally had to come to the conclusion that it is not that simple, at least when you want to have a “CSS only” solution. To this day i stumbled across various approaches to solve this problem.

Solution 1 – Absolute Positioning

This approach uses absolute positioning to “stretch” the div between two given heights.

HTML:

<div id="inner_fixed">
    I have a fixed height
</div>
 
<div id="inner_remaining">
    I take up the remaining height
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
 
#inner_fixed {
    height: 100px;
    background-color: grey;
}
 
#inner_remaining {
    background-color: #DDDDDD;    
 
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 100%; 
}

JSFiddle

http://jsfiddle.net/Lv6uj/

pros

  • easy to implement
  • intuitive

cons

  • tedious to maintain (hard-coded positions)

Solution 2 – Tables (or rather display: table)

By utilizing the property of tables to distribute the given space between the rows and assigning fixed heights to some element, the other elements end up using the remaining height.

HTML:

<div id="outer">
    <div id="inner_fixed">
        I have a fixed height
    </div>
 
    <div id="inner_remaining">
        I take up the remaining height
    </div>
</div>

CSS:

html, body, #outer {
    height: 100%;
    width: 100%;
    margin: 0;
}
 
#outer {
    display: table;
}
 
#inner_fixed {
    height: 100px;
    background-color: grey;
 
    display: table-row;
}
 
#inner_remaining {
    background-color: #DDDDDD;
 
    display: table-row;    
}

JSFiddle

http://jsfiddle.net/fT8gZ/

pros

  • rather “clean” solution
  • no hard-coded values, other elements can change their height

cons

  • might cause some side-effects with the layout

Solution 3 – CSS3 calc

This approach makes use of the new css function calc(link) to assign a height that is calculated from the total height minus the height of the other elements.

HTML:

<div id="inner_fixed">
    I have a fixed height
</div>
 
<div id="inner_remaining">
    I take up the remaining height
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
 
#inner_fixed {
    height: 100px;
    background-color: grey;
}
 
#inner_remaining {
    background-color: #DDDDDD;
 
    height: calc(100% - 100px);    
}

JSFiddle

http://jsfiddle.net/9d2b7/

pros

  • easy to implement
  • less code than the other solutions

cons

  • the calc function is rather new (no support for older browsers)
  • tedious to maintain (hard-coded height)

 

There are also other ways to archive this effect e.g. by pushing down the lower element by an floating upper element etc. but most of the time i used one of this three solutions.

3 thoughts on “How to make a div take the remaining height

Leave a Reply

Your email address will not be published. Required fields are marked *