我知道我已经看到了这个问题的解决方案,但我找不到它的生命.
我已经将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>
我可以发誓最小高度会导致身体伸展以适应内容,但我显然是错的.有人能指出它真的很快吗？
如果你只是设置一个应该工作正常min-height:
html, body {
min-height: 100%;
}
正如你在这里看到的:http://jsfiddle.net/7hg7m