Please enable Javascript for better experience...
Setting height of chlid divs 100 percent to its parent element
By Rahul Kumar Jha | Jul 5, 2016 | In Articles | Total Views [ 2784 ]
Taged In
(0 Like)
Rate

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.

image

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.

image

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.

Share this

About the Author

Rahul Kumar Jha
Rahul Kumar Jha
Founder, Developer dotnet-concept.com

Public profile: user/profile/99900001


Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, ANGULAR, ANGULAR JS, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment
 
 
 
 
 
 
Sponsors