Have a div to fill out the remaining height/width of a container when sharing it with another div?

Question

Say I've got the following setup:

<div class="A parent">
    <div class="A a1"></div>
    <div class="A a2"></div>
    <div class="A a3"></div>
</div>

CSS:

.A {
    width: 100%;
}

.parent {
    height: 300px;
    width: 300px
}

.a1 {
    height: 100px;
 }

.a2 {
    height: 100px;
}

.a3 {
    // ??
}

Is there any way I can get .a3 to fill out the remaining height of the parent div, without any content and without explicitly stating its height? This would be so useful for responsive design.

kunalbhat · Answer 1 · 2013-08-30T17:59:09.143

2

In this case, since you have a hardcoded height to your parent container, you can set the height of .a3 to 100%:

CSS

.parent {
  overflow: hidden; /** This will hide the overflow **/
  height: 300px;
  width: 300px
}

.a3 {
  background: blue;
  height: 100%;
}

Codepen example.

UPDATE with Flexbox solution

Using flexbox, and defining a flex-direction of column, you can have your columns organically assume a height based on a parent container.

CSS

.parent {
  display: flex; /** Set display type **/
  flex-direction: column; /** Flexbox direction **/
  flex-wrap: nowrap; /** Each row should take up 100% of the width **/
  height: 300px;
  width: 300px;
}


.a1, .a2, .a3 {
  flex-grow: 1; /** 1 per row **/
}

.a1 { background: green; } /** No more explicit heights, if you want **/
.a2 { background: red; }
.a3 { background: blue; }

edited Aug 30 '13 at 17:59

answered Aug 30 '13 at 17:38

kunalbhat

1,709
10
11

Ah. What if one of the elements, say the middle one, has no explicit height but gets its height from content? – styke Aug 30 '13 at 17:40
OK :) one sec, let me whip something up. – kunalbhat Aug 30 '13 at 17:41
In the meantime, you should check out CSS Flexbox: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – kunalbhat Aug 30 '13 at 17:43
Sorry, I need it to fit the parent perfectly. – styke Aug 30 '13 at 17:44
Updated with flexbox solution. – kunalbhat Aug 30 '13 at 17:56
This is useful if you DON'T have explicit heights, and you can't make assumptions. – kunalbhat Aug 30 '13 at 18:00
It looks like by default, the height is distributed evenly among the child elements. It will be great when `display: flex` is widely supported. Nicely done. – Marc Audet Aug 30 '13 at 18:03
You might want to add a footnote about browser support (-moz prefix) and so on, see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – Marc Audet Aug 30 '13 at 18:06

score 2 · Accepted Answer · answered Aug 30 '13 at 17:54

2

Here is a simple way of doing it. Since you know your heights of the parent and the first two child elements, you can use absolute positioning for the third child block:

.A {
    width: 100%;
}
.parent {
    height: 300px;
    width: 300px;
    position: relative;
}
.a1 {
    height: 100px;
    background-color: pink;
}
.a2 {
    height: 100px;
    background-color: beige;
}
.a3 {
    background-color: yellow;
    position: absolute;
    top: 200px;
    bottom: 0;
}

See demo: http://jsfiddle.net/audetwebdesign/WbRZn/

This uses CSS2 so it should be backwards compatible, probably back to IE5.

answered Aug 30 '13 at 17:54

Marc Audet

46,011
11
63
83

This an extremely nifty solution! – styke Aug 30 '13 at 17:57
Indeed, this is a very useful trick, especially when you know heights and widths! – Marc Audet Aug 30 '13 at 17:58
Useful if you know many things, like heights of preceding divs, and which one you explicitly want to set the `bottom` on, but what about organically, like @styke mentioned in the comments related to mine: "What if one of the elements, say the middle one, has no explicit height but gets its height from content?" – kunalbhat Aug 30 '13 at 18:02
That is why flex was created! Otherwise, one would need JavaScript to compute the height of the middle box and so on. – Marc Audet Aug 30 '13 at 18:05
You should probably check out the CSS3 [FlexBox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/) concept, too. Thankfully, that's the future, so if you've got an opportunity to design for it, by all means do. – kael Sep 04 '13 at 03:17

score 1 · Answer 3 · answered Aug 30 '13 at 18:08

1

Depending on the look you were going for, you could always wrap the first two boxes with .a3, then set height: 100% on a3.

answered Aug 30 '13 at 18:08

TimCodes.NET

4,601
1
25
36

Mathijs Flietstra · Answer 4 · 2013-08-30T18:19:01.730

Just in case OP's first comment on @kunalbhat's answer is an important requirement

What if one of the elements, say the middle one, has no explicit height but gets its height from its content?

you can use display: table; and display: table-row; like this:

CSS:

.A {
    width: 100%;
}
.parent {
    height: 200px;
    width: 300px;
    position: relative;
    display: table;
}
.a1 {
    background-color: pink;
}
.a2 {
    background-color: beige;
}
.a3 {
    background-color: yellow;
    height: 100%;
    display: table-row;
}

Here's a jsFiddle, this should work in and IE8+ and all other browsers.

Have a div to fill out the remaining height/width of a container when sharing it with another div?

4 Answers4

Linked