html - html body 高度 100%显示垂直滚动条

  显示原文与译文双语对照的内容
117 2

考虑到例外,考虑到示例 below,为什么在 #container div上使 margin 在浏览器中显示垂直滚动条。容器的高度要比 body 高度小得多,它设置为 100% 。

我已经将所有元素的padding 和边距设置为 0,除了 #container. 之外注意,我故意省略了 #container div上的绝对定位。在这种情况下,浏览器如何计算 body的高度以及 margin 如何影响它?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0; margin:0;}
html, body { height:100%; }
#container
{
 padding:10px;
 margin:50px;
 border:1px solid black;
 width: 200px;
 height: 100px;
}
</style>
</head>
<body>
 <div id='container'>
 </div>
</body>
</html>

JSFiddle 上也有示例。

时间:原作者:0个回答

137 4

如果你绘制 htmlbody ( 给自己的颜色)的背景,你会很快注意到 body 正在向下移动,并且 #container 本身不是从 body的顶部偏移。这是的副作用,我将在这里详细介绍 ( 虽然这个答案描述了一个稍微不同的设置) 。

这是这样的行为,导致滚动条出现,因为你声明了 body 为 100%的html 高度。注意 body的实际高度不受影响,因为边距不包括在高度计算中。

原作者:
56 4

有点晚了但可能会帮助某人。

float: left; 添加到 #container 将删除滚动条,如W3C所示:

原作者:
...