Have A Div To Fill Out The Remaining Height/width Of A Container When Sharing It With Another Div?

Say I've got the following setup:

Solution 1:

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.

Solution 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; }

Solution 3:

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

Solution 4:

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.

Share