Question

说有一个页面：

<html><body>
<div style="position: relative;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

为什么水平滚动条仅考虑RIGHT溢出？

换句话说，为什么LEFT不会触发滚动条，而RIGHT会触发？

除了body -> overflow: hidden之外，是否还有一种方法可以不触发滚动条？

修改：

我试图实现的是页面中间的包装器（就像其他任何“内容”窗格一样 - 基本上是div -> margins: 0 auto;。如果屏幕太小，这应该触发水平滚动条。然后，这个问题是，我希望另一个div“贴在外面” - 这些不应该触发滚动条。

编辑2 ：

<html><body>
<div id="wrapper" style="position: relative; margin: auto; 
  width: 400px; height: 200px; background-color: red;">
  <div style="position: absolute; left: -30px;">LEFT</div>
  <div style="position: absolute; right: -30px;">RIGHT</div>
<div>
</body></html>

当屏幕足够宽时，一切都很好。但是当我尝试缩小屏幕时，突然出现一个水平滚动条。问题是，它只允许滚动查看右侧，而不是左侧。滚动条的一种方法是在包装器之前不显示，只有包装器大于屏幕？

Answer 1

在澄清之后，我理解了这个问题。

您可以通过添加包装元素并提供overflow: hidden和min-width来解决这个问题。

Live Demo

<强> HTML：

<div id="outerContainer">
    <div id="container">
        <div id="left">left</div>
        <div id="right">right</div>
        text
    </div>
</div>

<强> CSS：

html, body {
    margin: 0; padding: 0; border: 0
}

#outerContainer {
    overflow: hidden;
    min-width: 300px
}
#container {
    margin: 0 auto;
    width: 300px;
    background: #ccc;
    position: relative
}

#left, #right {
    position: absolute;
    background: #666;
    width: 60px
}
#left {
    left: -60px
}
#right {
    right: -60px
}

Answer 2

我遇到了同样的问题，最终使用媒体查询解决了问题。在我的情况下，我希望有一个可拖动/可调整大小的侧边栏部分位于屏幕外（如果窗口宽度约为1000px），没有水平滚动条。

但如果窗口宽度小于960像素（主容器宽度为960），则应该存在水平滚动条，以便用户可以看到所有内容。

标记：

<div class="container">
    <div class="main">
        <p>Main content</p>
    </div>
    <div class="sidebar">
        <p>
          Sidebar content
        </p>
    </div>
</div>

CSS

.container {width:960px;margin:0 auto;position:relative;}
.main {padding-right:100px}
.sidebar {width:400px;position:absolute;top:0;right:-100px}

 // The fix:
@media only screen and (min-width: 960px) {
 html {overflow-x:hidden} // no scroll if window width is > 960px
}

CSS，position：absolute，scrollbars

2 个答案: