CODEWITHSUNDEEP
htmlcss
Jesse
Jesse

Reputation: 1225

<div> take up all height of parent

I have two side-by-side <div> blocks that are both contained in a larger <div> block. I'd like the smaller of the two child <div> blocks to take up all remaining vertical space of the parent block, without actually knowing the height of the parent.

Is this possible to do without any Javascript?

In this example: http://jsfiddle.net/5J8Em/2/ I'd like the red <div> to be just as tall as the blue one.

Upvotes: 0

Views: 1803

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

Try using display:table; for parent element and display: table-cell; for children:

HTML:

<div id="a">
    <div id="b">
        hello world 
    </div>
    <div id="c">
        hello world hello world hello world 
        hello world hello world hello world 
    </div>
</div>​

CSS:

#a {
     background-color:rgb(100,100,100);      
     width:200px; 
     display:table;
}

#b {
     background-color:red; 
     vertical-align:top;
     display: table-cell;
}

#c {
     background-color:blue;   
     width:100px;
     word-wrap:break-word;   
     display: table-cell;    
}

Here is the jsFidde demo

Upvotes: 3

Related Questions