child height div expand to bottom of parent div

Question

I have the following html:

<div class="div1">
    <div class="div1a"></div>
    <div class="div1b"></div>
    <div class="div1c"></div>
</div>

Here a link of layout: http://jsfiddle.net/7ZGaG/5/

I need to give height only to div1.

• div1a and div1b have fixed height. (In fact div1 has also a fixed height)
• div1c needs to expand to the bottom of div1.

For example:

div1: 400px
div1a: 100px
div1b: 100px
div1c: 50px

So there is 150px empty place at the bottom. (400 - 100 - 100 - 50 = 150). How can I solve this with css that div1c has the height to the bottom of div1?

If I do height:100% for div1c, then it takes height of div1, and that is 400px.

Thanks!

Answer 1

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

See working example: http://jsfiddle.net/Wexcode/ENaqK/

Answer 2

Easy solution would be to style the parent div with overflow:hidden and the child div with height:100%

Add the following attributes:

---

For div1

position:fixed

---

For div1c

overflow:hidden; position:relative; height:100%;

---

Sample code - http://jsfiddle.net/7ZGaG/26/

Answer 3

Instead of using the default block layouting, you could use a Flex layout and then use flex-grow to indicate that the last element should grow:

.div1 {
  display: flex;
  flex-direction: column;
}
.div1c {
  flex-grow: 1;
}

Answer 4

Here's some CSS that will do it.

.div1 is overflow: hidden set to grab the height of the tallest div. Which it sounds like it could be .div1a or .div1b . .div1c is position: absolute so that it can use .div1 is a guide, it positions itself off of the bottom and is put into position with top and right .

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/

Answer 5

Here's what I've come up with ( my jsfiddle ):

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

I would do it a bit differently, however, if I had access to JavaScript.