问题描述:

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;
}
网友答案:

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>
相关阅读:
Top