How to assign percentage values to div to divide entire page into 3 parts with body height = window’s height

Tags:
ajax android angularjs arrays asp.net bash c# css database date dictionary eclipse eloquent function gcc git hibernate html java javascript jquery laravel laravel-4 laravel-5 linux linux-kernel mysql nginx php python r reactjs regex ruby-on-rails select shell sql sql-server sql-server-2008 string tsql twitter-bootstrap ubuntu version-control xml

How to assign percentage values to div to divide entire page into 3 parts with body height = window’s height

I want to create 3 div such that the entire page is of the size of the window( i.e the page should not scroll) and each div should have height as of some percent of the entire height.
e.g

|--------------------------------------|
|      Body height=window's height     |
| |----------------------------------| |
| |        Header height:10%         | |
| |----------------------------------| |
| |                                  | |
| |        Content height:85%        | |
| |                                  | |
| |                                  | |
| |----------------------------------| |
| |        Footer height:5 %         | |
| |----------------------------------| |
|--------------------------------------|

Here is the code which I used without any success

<body style="width: 100%; height:100%">
<div style="width: 100%; height:100%;">
    <div id="headerDiv" style="width: 100%; height:10%; background-color: #ff0000">
        <!-- some content -->
    </div>
    <div style="width: 100%; height:85%;"   >
        <!-- some content -->
    </div>
    <div style="width: 100%; height:5%"  >
        <!-- some content -->
    </div>
</div>
</body>

Do you need something like this?

Demo

html, body {
    height: 100%;
}

div:nth-of-type(1) {
    background: #f00;
    height: 20%;
}

div:nth-of-type(2) {
    background: #00f;
    height: 70%;
}

div:nth-of-type(3) {
    background: #0f0;
    height: 10%;
}

I guess your solution will also work, but you must have missed out resetting default browser styles, use this in your CSS and you’ve missed out setting height: 100%; for html element too

* {
   margin: 0;
   padding: 0;
}

Recent Activity

Related Posts

.
.
.
.