出于好奇，考虑一下下面的示例，为什么#CONTAINER div上的页边距会导致浏览器中出现一个垂直滚动条？容器的高度比设置为100%的主体高度小得多.
我已经将除#容器之外的所有元素的填充和边距设置为0.请注意，我故意忽略了#container div上的绝对位置.在这种情况下，浏览器如何计算身体的高度，以及边距如何影响身体的高度？
<!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上