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

Question

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>

You don't need to specify width: 100% for all div. As div's width is 100% by default. And for height, define body and html to 100% as define by Mr. Alien. — Tarun, May 07 '13 at 09:04

Mr. Alien · Accepted Answer · 2013-05-07T08:15:26.157

9

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;
}

edited May 07 '13 at 08:15

answered May 07 '13 at 08:09

Mr. Alien

153,751
34
298
278

Thanks. I used your suggestions on my solution and it's working now. – rdp May 07 '13 at 09:09
1

I cannot upvote more than once, but if I could, I would. Thank you, you are a lifesaver!!! – molli Jul 22 '13 at 10:15

score 0 · Answer 2 · answered May 07 '13 at 08:16

Try to change the height value to PX:

<body style="width: 100%; height:100%">
<div style="width: 100%; height:1000px;">
    <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>

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

2 Answers2

Linked