出于好奇，考虑下面的示例，为什么在#container div上留有空白会导致垂直滚动条出现在浏览器中？容器的高度比设置为100％的主体高度小得多。
我已将#container以外的所有元素的填充和边距设置为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>
Answers:
如果你画的背景html和body（给每一个自己的颜色），你会很快通知，body正在沿向下移动#container，而#container本身不是从顶部偏移body的。这是边距崩溃的副作用，我在这里详细介绍（尽管答案描述的设置略有不同）。
正是这种行为导致了滚动条的出现，因为您已声明body高度为100％html。请注意，的实际高度body不受影响，因为高度计算中永远不会包含边距。
html为100％时，将使其占视口（浏览器的查看区域）的100％；高度body为100％时，其高度将为其父视口的100％，即html。后面的任何百分比始终都是元素祖先的百分比。如果不设置100％的高度上html还是body那么他们的行为像任何其他块元素。有关详细信息，请参见w3.org/TR/CSS21/syndata.html#percentage-units。最终，在渲染过程中，％s和ems都必须全部转换为某个绝对值，以使浏览器准确知道要在屏幕上测量和渲染事物的大小。
html和body行为像任何其它块级元素为好。
添加float:left;是不错的，但是会干扰使用margin:auto;
如果您知道您的保证金有多大，您可以使用calc在身高百分比中说明：
height: calc(100% - 50px);
浏览器支持很好，但是只有IE11 + https://caniuse.com/#feat=calc
在将所有内容放入body称为wrap的div中之前，我看到此问题已解决。包装的样式应设置为position: relative; min-height: 100%;。要从#container顶部和左侧将div定位为50px，请将div置于内部包装中，并将其填充设置为50px。边距不能与wrap和我们刚刚创建的div一起使用，但它们将在其中#container以及其中的所有内容上使用。
对于那些来这里以获得更容易理解的答案（甚至包括代码示例）的人，此答案（从此处复制）非常适合您。
不需要JavaScript或确定的像素值（例如100px），只需纯CSS和百分比。
如果您的div只是独自坐在那里，height: 50%则意味着身高的50％。通常，身体的高度为零，没有可见的内容，因此其中的50％恰好为零。
这是解决方案（基于此）（取消注释background行以获得填充的可视化）：
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html
{
height: 100%;
/* background: green; */
}
body
{
/*
100% the height of <html> minus 1 multiple of the total extra height from the padding of <html>.
This prevents an unnecessary vertical scrollbar from appearing.
*/
height: calc(100% - 1em);
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS. */
div
{
width: 50%;
height: 50%;
background: red;
}<div></div>上面这样写是为了仍然会有通常的填充。您可以将红色的尺寸设置为div，100%并在每侧/每端仍然看到填充。如果您不希望使用此填充，请使用它（尽管看起来不太好，我建议您坚持使用第一个示例）：
/* Makes <html> take up the full page without requiring content to stretch it to that height. */
html, body
{
height: 100%;
}
/* You can uncomment it but you wouldn't be able to see it anyway. */
/*
html
{
background: green;
}
*/
body
{
margin: 0;
/* background: blue; */
}
/* In most cases it's better to use stylesheets instead of inline-CSS */
div
{
width: 50%;
height: 50%;
background: red;
}<div></div>我找到了一个快速解决方案：尝试将高度设置为99.99％，而不是100％