You can set height of chlid divs 100% to its parent element using display: table and display:table-cell.

Introduction

Many times I foudn situation where I want to adjust heights of inner div elements equal to out div or say all innner divs should be equal in height regardless of their contents. You can achieve this is using display attribute of css.

In above example it can clearly seen that all inner divs are not equal because of content they have.

display: table and display: table-cell

Display attribute has many options like block, inline, inline-block etc. You can achieve above requirement using display: table and display:table-cell combinations.

Below code illustrates the same.

Style

<style>
.mainCol{
    display: table;
    background-color: gray;
    color: #fff;
}
.col1{
    width: 33.33%;
    background-color: red;
    display: table-cell;
    padding: 20px;
}
.col2{
    width: 33.33%;
    background-color: green;
    display: table-cell;
    padding: 20px;
}
.col3{
    width: 33.33%;
    background-color: blue;
    display: table-cell;
    padding: 20px;
}
</style>

HTML

<div class="mainCol">
                    <div class="col1">
                    This is the first paragraph.
                    </div>
                    <div class="col2">
                    This is the second paragraph. Content is larger than other divs.
                    I am paragraph. I am paragraph. I am paragraph. I am paragraph. I am paragraph. I am paragraph. I am paragraph. I am paragraph. I am paragraph.
                    </div>
                    <div class="col3">
                    This is the third paragraph.
                    </div>
                </div>

Hope it helps you. Display attribute is simple but very important.You can use other options also like block, inline to style your pages. I will explain them some other time.