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％的高度，只会根据#header和#content中的内容以及#header和#content进行扩展。 #container为空或已删除，{{1}}根本不会展开。

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

Answer 1

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

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

OR

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

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

如果指定了最大高度（例如#container { max-height: 50px }），则会超过高度。但是，最大高度不能超过最小高度。 Read more at this link