Html 体高 100% 显示垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12989931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Body height 100% displaying vertical scrollbar
提问by neodymium
Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.
出于好奇，考虑下面的示例，为什么 #container div 上的边距会导致浏览器中出现垂直滚动条？容器的高度比设置为 100% 的主体高度小得多。
I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?
我已将除#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>
Example also on JSFiddle
采纳答案by BoltClock
If you paint the backgrounds of htmland body(giving each its own color), you'll quickly notice that bodyis being shifted down along with #container, and #containeritself isn't offset from the top of bodyat all. This is a side effect of margin collapse, which I cover in detail here(although that answer describes a slightly different setup).
如果你画的背景html和body（给每一个自己的颜色），你会很快通知，body正在沿向下移动#container，而#container本身不是从顶部偏移body的。这是margin collapse的副作用，我在这里详细介绍（尽管该答案描述的设置略有不同）。
It's this behavior that's causing the scrollbar to appear, since you've declared bodyto have 100% the height of html. Note that the actual height of bodyis unaffected, as margins are never included in height calculations.
它的这种行为是造成滚动条出现，因为你已经宣布body有100％的高度html。请注意，实际高度body不受影响，因为边距永远不会包含在高度计算中。
回答by Michel
A bit late, but maybe it helps someone.
有点晚了，但也许它可以帮助某人。
Adding float: left;to #containerremoves the scrollbar, as W3C says:
添加float: left;到#container删除滚动条，正如 W3C 所说：
?Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
?浮动框和任何其他框之间的边距不会折叠（甚至在浮动框和它的流入子框之间也不折叠）。
回答by harshvchawla
Based upon @BoltClock?'s answer, I fixed it by zeroing the margin...
so
根据@BoltClock? 的回答，我通过将边距归零来修复它......
所以
html,body, #st-full-pg {
height: 100%;
margin: 0;
}
works where id "st-full-pg" is assigned to a panel div (which further contained panel-heading and panel-body)
在将 id "st-full-pg" 分配给面板 div（进一步包含面板标题和面板正文）的情况下工作
回答by ben.tiberius.avery
adding float:left;is nice, but will interfere with central horizontal positioning using margin:auto;
添加float:left;很好，但会干扰中央水平定位使用margin:auto;
if you know how big your margin is, you can account for that in your height percentage using calc:
如果您知道您的利润有多大，您可以使用 calc 在您的身高百分比中说明这一点：
height: calc(100% - 50px);
browser support is good, but only IE11+ https://caniuse.com/#feat=calc
浏览器支持不错，但只有 IE11+ https://caniuse.com/#feat=calc
回答by Vikash Pal
I have found a solution: add padding: 1px 0; to body prevents vertical scrollbars to appear
我找到了一个解决方案：添加 padding: 1px 0; to body 防止出现垂直滚动条
回答by Evan Hu
Inspired by @BoltClock, I tried this and it worked, even when zoom out and in.
受到@BoltClock 的启发，我尝试了这个并且它有效，即使在放大和缩小时也是如此。
Browser: Chrome 51
Browser: Chrome 51
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
position: relative;
top: -20px;
}
I guess bodywas shifted down 20px.
我猜body是向下移动了 20px。
回答by NexusRex
Add overflow: hidden;to html and body.
添加overflow: hidden;到 html 和正文。
html, body {
height: 100%;
overflow: hidden;
}
回答by fjkjava
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
This worked for me
这对我有用
回答by lalit bhakuni
html, body {
height: 100%;
overflow: hidden;
}
If you want to remove the body scrolling add the following style:
如果要删除正文滚动，请添加以下样式：
body {
height: 100%;
overflow: hidden;
}
回答by TheZacher5645
I saw this problem fixed before where you put all the contents of bodyin a div called wrap. Wrap's style should be set to position: relative; min-height: 100%;. To position #containerdiv 50px from the top and left put a div inside wrap with a padding set to 50px. Margins will not work with wrap and the div we just made, but they will work in #containerand everything inside it.
在将 的所有内容放在body名为 wrap 的 div 中之前，我看到此问题已解决。Wrap 的样式应设置为position: relative; min-height: 100%;. 要将#containerdiv 放置在距离顶部和左侧 50px 的位置，请将一个 div 放在 wrap 内，并将 padding 设置为 50px。边距不适用于 wrap 和我们刚刚制作的 div，但它们可以在其中#container以及其中的所有内容中使用。
