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

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

html css

Html 正文为100%，最小高度为100%，但内容超出浏览器屏幕,html,css,Html,Css,我知道我已经看到了这个问题的解决方案，但我一辈子都找不到我已经将html和body元素扩展到了dom的100%。它们的最小高度也为100%。问题是，当我的内容超出浏览器屏幕底部时，主体将不会随之扩展： <!DOCTYPE html> <html> <head> <title>Damn you body, extend!!</title> <style type="text/css">

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

我已经将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，正文{
身高：100%；
最小高度：100%；
}
html{
背景颜色：灰色；
}
身体{
宽度：90%；
保证金：自动；
背景色：白色；
}
正文>div{
背景色：红色；
高度：50px；
宽度：80px；
保证金：自动；
文本对齐：居中；
}
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem
testitem

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

如果你只设置一个

最小高度，应该可以正常工作：
html, body {
  min-height: 100%;
}

正如您在这里看到的：
这应该可以：
html,body {
  /* height: 100%; */
  min-height: 100%;
}

尝试删除height
属性，因为您已经设置了minheight
属性，否则可能会有冲突。希望有帮助
 对，我原以为是这样的。这是我在上面的例子中声明的第一条css规则。啊，我明白了。高度和最小高度相互冲突。我删除了高度规则，它工作得很好。谢谢你至少可以吃2个苹果，你会吃2个苹果，因此，如果你是一个好孩子，你最终会吃2个苹果，不是3个，也不是更多。：-）对于html和正文，我在这里推荐使用height:100%
和minheight:100%
的特定组合，并给出解释：