Question

我有一个元素（在我的情况下是一个HR标签），需要与浏览器一样宽，但也比它的父容器宽。但是，它仍然需要保持相对定位，以便它与页面垂直滚动。问题是我的父div也必须具有相对定位（由于其他布局正在工作）。

我能够解决这个问题的唯一方法是将HR标签的宽度设置为3000px，左侧位置为-1000px。这有效，但它为页面添加了一个水平滚动条（显示3000px宽度）。有没有办法干净地完成这个（没有水平滚动条）？你可以在http://jsfiddle.net/UGwst/看到我的小提琴。

这是HTML：

<div id="layout-wrapper">
  <p>Above Content</p>
  <div id="content-wrapper">
    <p>Top Content Here</p>
    <hr class="rule" />
    <p>Bottom Content Here</p>
  </div>
</div>

这是CSS：

#content-wrapper {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  background-color: #ddd;
  position: relative;
}
.rule {
  background-color: #dbb328;
  height: 5px;
  position: relative;
  left: -1000px;
  width: 3000px;
}

我意识到还有一些其他问题here是相似的，但似乎并没有解决这个问题。

Answer 1

尝试

body {overflow-x: hidden;}

消除水平滚动条。根据这个答案，它甚至适用于IE6 - CSS - Only Horizontal Overflow?

Answer 2

在父母身上使用position:relative。

在HR上使用position:absolute，这样HR就会绑定到父级，并会随之滚动。

要隐藏滚动条，请在外包装上使用overflow:hidden，或使用BODY。

使用相对定位时，设置元素的宽度比父级宽

2 个答案: