Question

当窗口调整大小（大小减小）超出它们时，绝对定位（侧面黄色广告）div会导致不需要的水平滚动条。仅当窗口小于主#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/

Answer 1

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

以下是一个有效的例子：http://jsfiddle.net/8UkQA/1/

Answer 2

我想进一步补充一下，如果遇到同样的问题，并且使用@Aaron建议的解决方案，页面似乎不会滚动，那么你可以使用＆＃34; overflow的轴特定版本＆＃34;属性，如下，

overflow-x: hidden;

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

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

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

Answer 3

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

Answer 4

当我希望我的div的一部分被剪切时，我遇到了类似的问题。因为css＆＃39; vw＆＃39;单位可用我通过以下方式解决了问题：

html {
    // ... some code here
    overflow-x: hidden;
    width: 100vw;
}

这对于响应式网站也很有效。

Answer 5

//首先需要停用SET SQL_SAFE_UPDATES=0，否则禁用水平滚动条无法正常工作

AutoScroll

//禁用flowLayoutPanel.AutoScroll = false;

horizontal scrollbar

//恢复flowLayoutPanel.HorizontalScroll.Enabled = false;

AutoScroll

希望这能解决您的问题。

位置：绝对导致水平滚动条

5 个答案: