4

我想创建 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>
4

2 回答 2

7

你需要这样的东西吗？

演示

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;
}
于 2013-05-07T08:09:27.760 回答
0

尝试将高度值更改为 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>
于 2013-05-07T08:16:31.683 回答