How to Expand Floated Child Div'S Height to Parent'S Height

How can I expand floated child div's height to parent's height?

For the parent element, add the following properties:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

then for .child-right these:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Find more detailed results with CSS examples here and more information about equal height columns here.

how to expand child div height to parents height

http://jsfiddle.net/r5h4w5s2/

.parent{
    width:200px;
    height:300px;
    border:1px solid black;
}

.child-left{
    float:left;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

.child-right{
    float:right;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

Here is a fiddle with an axample.
By setting the height to 100% it will take the height of its first parent element.

How to expand children div height to parent's height

You can set the parent's height, and then just set each child's height to 100%, and it will have each child have the same height as the parent, even if that expands the parent.

.parent.child:nth-child(1) {background-color: #f00;}.child:nth-child(2) {background-color: #0f0;}.child:nth-child(3) {background-color: #00f;}
.parent {  height: 100px;  background-color: red;}
.child {  height: 100%;}

<div class="parent">   <div class="child">   </div>   <div class="child">   </div>   <div class="child">   </div> </div>

How can I expand a child div height to parent height?

You could change display:inline-block to display:flex; to .parent-div

Check demo

Expanding a parent div to the height of its children

Try this for the parent, it worked for me.

overflow:auto;

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

Grow height of parent div that contains floating nested divs

If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:

.parent {
    overflow:hidden;
    width: 100%;
}

Read this article for more: http://www.quirksmode.org/css/clearing.html.

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.