我正在尝试制作一个100%高度的页面框.但是在Chrome和IE浏览器中,以下内容从页面底部延伸了几个像素,因此我必须滚动.为什么？为什么这里有滚动条？
<!doctype html>
<html >
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
div {
border:5px solid black;
height: 100%;
}
</style>
</head>
<body >
<div >This flows a few pixels off the bottom of the page</div>
</body>
</html>
它离页面几个像素,因为你包含一个5px的边框.它的主体div是页面高度的100%,但是它border位于其外部,在页面的100%高度上增加了10px的总高度.因此,在1000px页面上,div的高度将为1010px.删除边框,它将是正确的高度.
div {
height: 100%;
}
如果您仍然需要边框,而不是不需要的额外高度,则可以使用该box-sizing: border-box属性将其放置在div的边界内
div {
height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}