Question

我知道我已经看到了这个问题的解决方案，但我无法在我的生命中找到它。

我已经将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>

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

Answer 1

如果只设置min-height：

，应该可以正常工作

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

正如您在此处所见：http://jsfiddle.net/7hg7m

Answer 2

这应该有效：

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

Answer 3

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

身体在100％，最小高度为100％，但内容延伸到浏览器屏幕

3 个答案: