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 – Flex

This approach makes use of the fairly well supported flexbox layout.

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
 
#inner_fixed {
  height: 100px;
  background-color: grey;
}
 
#inner_remaining {
  background-color: #DDDDDD;
  flex-grow : 1;
}

JSFiddle

http://jsfiddle.net/36u4bxL1/

pros

• easy to implement
• modern

cons

• browser support

Solution 2 – Absolute Positioning

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

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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 3 – 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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 4 – 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:

1
2
3
4
5
6
7
8
9
10
11
12
13

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 or using the new css grid but nowadays I tend to use flex and the other above solutions as needed.