如何为div分配百分比值以将整个页面分成3个部分,其中身高=窗口高度

Question

我想创建3个div,使整个页面的大小与窗口大小相同(即页面不应滚动),每个div的高度应为整个高度的百分之几.例如

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

这是我使用的代码没有任何成功

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

Answer 1

你需要这样的东西吗？

演示

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

我猜你的解决方案也将工作,但你必须已经错过了重新设置默认浏览器的风格,在你的CSS使用这一点,你已经错过了设置height: 100%;的html太元

* {
   margin: 0;
   padding: 0;
}