Question

我想创建3个div，使整个页面的大小与窗口大小相同（即页面不应滚动），每个div的高度应为整个高度的百分之几。 e.g

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

你需要这样的东西吗？

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

我猜your solution will also work，但你一定错过了重置默认浏览器样式，在CSS中使用它并且错过了为height: 100%;元素设置html

* {
   margin: 0;
   padding: 0;
}

Answer 2

尝试将高度值更改为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>

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

2 个答案: