Position:absolute 导致水平滚动条答案

【问题标题】：Position:absolute causes horizontal scrollbarPosition:absolute 导致水平滚动条
【发布时间】：2013-10-11 00:12:12
【问题描述】：

绝对定位（侧面黄色广告）的 div 在调整窗口大小（尺寸减小）超出它们时会导致不需要的水平滚动条。只有当 window 小于 main #container 时才会出现滚动条，并且这些广告 div 不应该影响布局。他们是否被覆盖并不重要。

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：

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;
}

精确布局副本：http://jsfiddle.net/8UkQA/

【问题讨论】：

为什么没有将你的 CSS 中的溢出设置为隐藏？ w3schools.com/cssref/pr_pos_overflow.asp
在body 元素上设置overflow: hidden 将阻止用户滚动到超出浏览器窗口高度的正文内容。

标签： html css

【解决方案1】：

由于某种原因，超出body 边界的绝对定位元素似乎会导致出现滚动条。您可以通过简单地将 body 标签内的所有内容包装在一个相对定位的 div 中来解决这个问题，该 div 样式为 overflow: hidden;。超出此容器边界的绝对定位内容不会导致窗口出现滚动条。

这是一个工作示例：http://jsfiddle.net/8UkQA/1/

【讨论】：

澄清一下，如果绝对位置元素越过 top 或 left 上的body 的边界，它们不会导致滚动条。
Firefox（也可能是其他浏览器）存在与此方法相关的错误。当您在此页面上打开锚链接时，滚动条将再次出现。
我添加了 body{ 溢出：隐藏； } 到页面 css 样式，它就像一个魅力。谢谢！
将它添加到正文中对我来说并非一直有效。将它添加到 html 元素对我来说是诀窍。
我发现添加position: relative; 仅在将其添加到最近的父元素时才能解决问题。

【解决方案2】：

我想进一步补充一点，如果遇到同样的问题并且使用@Aaron 建议的解决方案，页面似乎无法滚动，那么您可以使用轴特定版本的“overflow”属性，如下所示,

overflow-x: hidden;

这只会隐藏右侧突出的内容（如果网站是 RTL，则隐藏左侧）而不是垂直内容。

如果突出内容仅以特定分辨率出现（如我的情况），为了进一步增强此方法，您可以使用 css 媒体查询来限制行为。

@media (min-width: 1500px) {
    body {
        overflow-x: hidden;
    }
}

【讨论】：

【解决方案3】：

您需要给子坐标 a.k.a. top: 0; left: 0;

【讨论】：

【解决方案4】：

//需要先禁用AutoScroll，否则禁用水平滚动条不起作用

flowLayoutPanel.AutoScroll = false;

//禁用horizontal scrollbar

flowLayoutPanel.HorizontalScroll.Enabled = false;

//恢复AutoScroll

flowLayoutPanel.AutoScroll = true;

希望这能解决您的问题。

【讨论】：