CODEWITHSUNDEEP
javascriptcsshtmlheight
Ozkan
Ozkan

Reputation: 2041

child height div expand to bottom of parent div

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.

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!

Upvotes: 1

Views: 3537

Answers (5)

Frerich Raabe
Frerich Raabe

Reputation: 94549

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

Upvotes: 1

Swanidhi
Swanidhi

Reputation: 2046

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/

Upvotes: 0

Wex
Wex

Reputation: 15715

.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/

Upvotes: 3

dunnza
dunnza

Reputation: 476

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.

Upvotes: 0

nheinrich
nheinrich

Reputation: 1841

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/

Upvotes: 0

Related Questions