这一定是一个以前回答过的问题，但我找不到涵盖它的答案。
下面的 html/css 做了一些我觉得很奇怪的事情，它在 FF4/5、Chrome 12 和 Safari 5 中都做了，所以至少这种奇怪在浏览器中是一致的。
有问题的奇怪之处:</p>
- body 元素，高度为:100%， 停在浏览器底部 window 。向下滚动显示 灰色下方的白色 <正文>.
- 蓝色的
也停在浏览器窗口的底部。
尽管它们都包含在 DOM 中，但它们都在高度为 100% 的元素中。如果这个问题已经得到回答，我深表歉意，并感谢您指导我对这里发生的事情进行描述性解释。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simple height test</title>
<style type="text/css">
html, body {
border: 0px;
margin: 0px;
height: 100%;
}
html {
background-color: #FFFFFF;
}
body {
background-color: #999999;
}
#contentBorder {
width: 20px;
height: 100%;
background-color: #666699;
float: left;
}
#contentContainer {
width: 200px;
height: 1000px;
background-color: #333333;
}
</style>
</head>
<body>
<div id="contentBorder"></div>
<div id="contentContainer"></div>
</body>
</html>
最佳答案
将 body 和 html 的高度指定为 100% 会将它们设置为浏览器窗口高度的 100%。如果您希望背景填满页面的整个垂直高度，那么如果您从第一个 CSS block 中删除 height: 100% 应该会起作用。
关于html - 元素高度锁定到浏览器高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6621543/