身体高度100％显示垂直滚动条
出于好奇，考虑下面的例子，为什么在#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> 也在JSFiddle上的例子
如果你绘制html和body的背景（给它们自己的颜色） ，你很快就会注意到body正在和#container一起向下移动，并且#container本身根本就没有偏离body的顶部。 这是边缘崩溃的一个副作用，我在这里详细讨论（尽pipe这个答案描述了一个稍微不同的设置）。
这就是导致滚动条出现的行为，因为你已经声明了body有100％的html高度。 请注意， body的实际高度不受影响，因为边距永远不会包含在高度计算中。
有点晚了，但也许有助于某人。
添加float: left; 到#container移除滚动条，正如W3C所说：
•漂浮的盒子和其他盒子之间的边距不会折叠（即使在漂浮的盒子和入stream的孩子之间也是如此）。
基于@ BoltClock♦的答案，我通过调整边距来修复它…
所以
html,body, #st-full-pg { height: 100%; margin: 0; }
作品id为“st-full-pg”分配给面板div（还包含panel-heading和panel-body）
添加overflow: hidden; 到HTML和正文。
html, body { height: 100%; overflow: hidden; }
html, body { height: 100%; overflow: hidden; }
如果要删除正文滚动添加以下样式：
body { height: 100%; overflow: hidden; }
我看到这个问题之前，你把所有的内容放在一个叫做wrap的div里。 包装的风格应设置为position: relative; min-height: 100%; position: relative; min-height: 100%; 。 要从上面放置#container div 50px，并将内部div放置在内部，并将填充设置为50px。 包装和我们刚刚制作的div无法使用边距，但是它们将在#container和其中的所有内容中工作。
这里是我对jsfiddle的修复 。
html,body { height: 100%; margin: 0; overflow: hidden; }
这对我有效
joinfloat:left; 是好的，但会干扰使用margin:auto;中央水平定位margin:auto;
如果你知道你的保证金有多大，你可以使用calc来计算你身高的百分比：
height: calc(100% - 50px);
浏览器的支持不错，但只有IE11 + https://caniuse.com/#feat=calc
我发现一个快速解决scheme：尝试将高度设置为99.99％而不是100％
