出于好奇，考虑下面的示例，为什么 #container div 上的边距会导致垂直滚动条出现在浏览器中？容器的高度远小于设置为 100% 的主体高度。
我已将除#container 之外的所有元素的填充和边距设置为 0。请注意，我故意省略了#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上的示例
如果你绘制htmland的背景body（给每个它自己的颜色），你会很快注意到它body随着 向下移动#container，并且#container它本身根本没有从顶部偏移body。这是margin collapse的副作用，我在这里详细介绍（尽管该答案描述了稍微不同的设置）。
正是这种行为导致滚动条出现，因为您已声明body100% 的高度为html. 请注意，实际高度body不受影响，因为边距从不包含在高度计算中。
根据@BoltClock♦的回答，我通过将边距归零来修复它......
所以
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
在将 id "st-full-pg" 分配给面板 div 的情况下工作（进一步包含面板标题和面板主体）
有点晚了，但也许它可以帮助某人。
正如 W3C 所说，添加float: left;到删除滚动条：#container
•浮动框和任何其他框之间的边距不会折叠（甚至在浮动和它的流入子代之间）。
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
这对我有用
添加float:left;很好，但会干扰使用中心水平定位margin:auto;
如果你知道你的边距有多大，你可以使用 calc 计算你的高度百分比：
height: calc(100% - 50px);
浏览器支持不错，但只有IE11+ https://caniuse.com/#feat=calc
我找到了解决方案：添加填充：1px 0；to body 防止出现垂直滚动条
/*removes default margin & padding*/
html, body{
padding: 0px !important;
margin: 0px !important;
}
/*sets body height to max; and allows scrollbar as page content grows*/
body{
min-height: 100vh;
}
受@BoltClock 的启发，我尝试了这个并且它有效，即使在放大和缩小时也是如此。
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
我猜body是向下移动了 20px。
您可以在 body 标记中添加不间断空格。
<body> <othertags>...</body>
对于那些来这里寻求更容易理解的答案（甚至包括代码示例）的人，这个答案（从这里复制）适合您。
不需要JavaScript 或明确的像素值（例如100px），只需纯 CSS 和百分比即可。
如果您的 div 只是自己坐在那里，height: 50%则意味着身体高度的 50%。通常，body 的高度是零，没有任何可见的内容，所以其中 50% 只是，嗯，零。
这是解决方案（基于this）（取消注释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>body在将所有内容放入名为 wrap 的 div之前，我看到此问题已解决。Wrap 的样式应设置为position: relative; min-height: 100%;. 要将#containerdiv 从顶部和左侧放置 50px 放置一个 div 内包裹，并将填充设置为 50px。边距不适用于 wrap 和我们刚刚创建的 div，但它们可以在#container其中以及其中的所有内容中使用。
html, body {
height: 100%;
overflow: hidden;
}
如果要删除正文滚动，请添加以下样式：
body {
height: 100%;
overflow: hidden;
}
这个对我有用：
html,
body {
height: 100%;
height: -webkit-fill-available; // Chrome
}
// Firefox
@-moz-document url-prefix() {
body {
box-sizing: border-box;
margin: 0;
padding: 1px;
}
}
添加overflow: hidden;到 html 和正文。
html, body {
height: 100%;
overflow: hidden;
}
我找到了一个快速的解决方案：尝试将高度设置为 99.99% 而不是 100%