css - 100% 高度的 div 遇到问题

Question

我对 CSS 100% 高度有一个奇怪的问题。我的站点的站点如下：

<html>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
    </div>
  </body>
</html>

我试图让容器的最小高度为 100%，所以我的 CSS 如下：

html { min-height: 100%; }
body { height: 100%; }
#container { height: 100%; }

问题是，#container不会填充 100% 的高度，只会根据 and 中的内容量进行扩展#header，#content如果#headerand#content为空或已删除，#container则根本不会扩展。

我觉得我必须忽略一些非常简单的事情，但一直在看这个并且我处于死胡同！有人可以指出问题吗？

score 1 · Accepted Answer

百分比高度：要将百分比高度设置为#container，其父元素必须具有特定高度。在这种情况下，您可以使用height:100%或来实现您想要的特定效果min-height:100%。要实现其中任何一个，每个祖先的#container高度或最小高度必须为 100%。

html, body, #container {
    height: 100%;
}

或者

html, body, #container {
    min-height: 100%;
}

使用min-heightvs.height：在您问题的狭窄范围内，它们将具有相同的效果。但是在同时具有高度和最小高度的页面上：

如果指定了最大高度（例如#container { max-height: 50px }），这将超过高度。但是，最大高度不能超过最小高度。在此链接上阅读更多内容。

1 回答 1