Question

我有以下html：

<html>
<body>
<div id="header" style="height:55px;">
<div id="menu" style="height:85px;">
<div id="container" style="height:100%;">
<body>
</html>

但是容器div没有占据整个高度。它取高度来覆盖其中的内容。

Answer 1

您可以使用calc()来实现

#container {
    height: calc(100% - 140px);
    background: #f00;
}

在这里，我将55px #header和85px #menu的{{1}}加起来，总计140px，而我们从{{1}中扣除100% }}。另外，避免使用内联CSS。只需确保将父级height设置为100%，否则解决方案将失败。

html, body {
    height: 100%;
}

浏览器支持也相当不错。

enter image description here

^{支持图表的信用：Mozilla Developer Network}

Answer 2

必须关闭HTML标记。

例如， <div>必须跟</div>后面有一些例外情况，例如被视为自动关闭的<input />和<img />代码。

以下是您的代码的稍微好一点的版本：http://jsbin.com/uyIwERE/4/edit