0

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

我能够解决这个问题的唯一方法是将 HR 标签的宽度设置为 3000 像素，左侧位置为 -1000 像素。这可行，但它向页面添加了一个水平滚动条（以显示 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;
}
​

我意识到这里还有几个其他类似的问题，但似乎并不能完全解决这个问题。

4

2 回答 2

1

尝试

body {overflow-x: hidden;}

消除水平滚动条。根据这个答案，它甚至可以在 IE6 - CSS - 只有水平溢出？

于 2012-11-02T20:57:00.887 回答
1

position:relative在父级上使用。

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

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

于 2012-11-02T20:57:29.297 回答