正文为 100%，最小高度为 100%，但内容超出浏览器屏幕答案

【问题标题】：Body at 100% and min-height of 100% but content extends past browser screen正文为 100%，最小高度为 100%，但内容超出浏览器屏幕
【发布时间】：2014-05-12 10:48:02
【问题描述】：

我知道我已经看到了这个问题的解决方案，但我一辈子都找不到它。

我已经将 html 和 body 元素扩展到 dom 的 100%。它们的最小高度也为 100%。问题是当我的内容超出浏览器屏幕底部时，正文不会随之扩展：

<!DOCTYPE html>
<html>
    <head>
        <title>Damn you body, extend!!</title>
        <style type="text/css">
            html,body{
                height     :100%;
                min-height :100%;
            }
            html{
                background-color:gray;
            }
            body{
                width            :90%;
                margin           :auto;
                background-color :white;
            }
            body > div{
                background-color :red;
                height           :50px;
                width            :80px;
                margin           :auto;
                text-align       :center;
            }
        </style>
    </head>
    <body>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
      <div>testitem <br />testItem</div>
    </body>
</html>

我本可以发誓最小高度会导致身体伸展以适应内容，但我显然错了。有人能很快指出来吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果您只设置min-height，应该可以正常工作：

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

如您所见：http://jsfiddle.net/7hg7m

【讨论】：

对，我就是这么想的。这是我在上面的示例中声明的第一个 CSS 规则。
啊，我明白了。高度和最小高度是冲突的。我删除了高度规则，它工作正常。谢谢！
你至少可以吃 2 个苹果 AND 你会吃 2 个苹果 所以，如果你是个好孩子，最后你会吃 2 个苹果，既不是 3，也不是更多。 :-)
这里有一个height: 100% 和min-height: 100% 的特定组合，我推荐这里的html 和body，并附上解释：stackoverflow.com/questions/17555682/…

【解决方案2】：

尝试删除height 属性，因为您已经设置了min-height 属性，否则可能会发生冲突。希望对您有所帮助！

【讨论】：

【解决方案3】：

这应该可行：

html,body {
  /* height: 100%; */
  min-height: 100%;
}

【讨论】：