Html Position:absolute 导致水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19308257/
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
Position:absolute causes horizontal scrollbar
提问by Biker John
Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #containerand these advertisement div's should not affect the layout. It doesnt matter if they get covered.
绝对定位（侧面黄色广告）div 会在窗口调整大小（缩小）超出它们时导致不需要的水平滚动条。只有当窗口小于主时才会出现滚动条，#container并且这些广告 div 不应影响布局。他们是否被覆盖并不重要。
HTML:
HTML：
<div id='topbar'>
<div id='menu'> <a href='#'>Link1</a>
<a href='#'>Link2</a>
<a href='#'>Link3</a>
<a href='#'>Link4</a>
</div>
</div>
<div id='container'>
<div id='pushfix'></div>
<div id='ad_container'>
<div id='ad1'>ad</div>
<div id='ad2'>ad</div>
</div>
Lorem ipsum placeholder text
</div>
CSS:
CSS：
body, html {
height:100%;
}
body {
margin:0;
}
#topbar {
width:100%;
background-color:#DCDCDC;
height:40px;
position:absolute;
}
#menu {
width:250px;
background-color:#B3B3B3;
margin:0 auto;
height:100%;
text-align:center;
line-height:40px;
}
#menu a {
color:#fff;
}
#container {
height:100%;
background-color:#808080;
width:240px;
padding:0 5px;
margin:0 auto;
}
#pushfix {
height:40px;
}
#ad_container {
position:relative;
width:240px;
}
#ad_container div {
width:100px;
background-color:yellow;
height:300px;
position:absolute;
}
#ad1 {
left:-105px;
}
#ad2 {
right:-105px;
}
Exact layout replica: http://jsfiddle.net/8UkQA/
精确布局副本：http: //jsfiddle.net/8UkQA/
回答by Aaron
Absolutely-positioned elements that expand beyond the boundaries of the bodyseem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.
body出于某种原因，超出边界的绝对定位元素似乎会导致出现滚动条。您可以通过简单地将 body 标签内的所有内容包装在一个相对定位的 div 中来解决这个问题overflow: hidden;。超出此容器边界的绝对定位内容不会在窗口上引起滚动条。
Here's a working example: http://jsfiddle.net/8UkQA/1/
这是一个工作示例：http: //jsfiddle.net/8UkQA/1/
回答by Mohd Abdul Mujib
I may like to further add, if the same problem is being faced and by using the solution suggested by @Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,
我可能想进一步补充，如果遇到同样的问题，并且通过使用@Aaron 建议的解决方案，页面似乎无法滚动，那么您可以使用“ overflow”属性的轴特定版本，如下所示，
overflow-x: hidden;
This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.
这只会隐藏在右侧（或左侧，如果网站是 RTL）突出的内容，而不是垂直内容。
Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.
如果突出内容仅以特定分辨率出现（如我的情况），为了进一步增强此方法，您可以使用 css 媒体查询来限制行为。
@media (min-width: 1500px) {
body {
overflow-x: hidden;
}
}
回答by JimmyRare
You need to give the child coordinates a.k.a. top: 0; left: 0;
你需要给孩子坐标又名 top: 0; left: 0;
回答by CHANDU
// need to disable AutoScrollfirst, otherwise disabling the horizontal scrollbar doesn't work
// 需要先禁用AutoScroll，否则禁用水平滚动条不起作用
flowLayoutPanel.AutoScroll = false;
// disable horizontal scrollbar
// 禁用 horizontal scrollbar
flowLayoutPanel.HorizontalScroll.Enabled = false;
// restore AutoScroll
// 恢复 AutoScroll
flowLayoutPanel.AutoScroll = true;
Hope this will resolve your issue.
希望这能解决您的问题。
