滚动条的 HTML/CSS 全宽问题

Question

这里是sn-p：

#bar {
    height: 30px;
    width: 100%;
    background-color: red;
}

#content {
    width: 1000px;
}

<div style="width: 300px; height: 200px; overflow: auto;">
    <div id="bar"></div>
    <div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>

当我将 2 个 div（“bar”、“content”）放入父 div 并将父 div 设置为固定宽度和高度时，溢出是自动以启用滚动条。然后将“内容”的宽度设置为大于其“父”的宽度，并将“栏”的宽度设置为 100%。 事实证明，“bar”的宽度将与其“父级”相同，而不是其“兄弟”“内容”。 因此，当您滚动它时，“条”将一起滚动而不是一直滚动...

是否有任何解决方案我们可以将“条”保持在顶部或将其设置为 100% 宽度作为其兄弟“内容”div？

谢谢！

Answer 1

也许您可以将 内容包装在滚动包装器中，而不是外框。 见以下代码：

#parentBox {
  width: 300px;
  height: 200px;
  border: 1px dashed grey;
}
#bar {
  height: 30px;
  width: 100%;
  background-color: red;
}
#content {
  width: 1000px;
}
.scrollWrapper {
  width: 100%;
  overflow: auto;
}

<div id="parentBox">
  <div id="bar"></div>
  <div class="scrollWrapper">
    <div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
  </div>
</div>

Answer 2

当然，使用一点hackery。由于这是一个仅显示的 div，您不妨将其从文档流中取出。作为奖励，这使您的 HTML 在语义上更加正确！

我们所做的是将您的内容设置为具有浏览器已知的宽度（使用 display:inline-block; 属性 - 块有布局，内联没有）。然后，我们创建一个伪 :before 元素来显示您的标题，并让它填充我们刚刚为您的内容提供的布局。

#content:before {
  height: 30px;
  content: '';
  background-color: red;
  display:block;
}
#content {
  display: inline-block;
}

<div style="width: 300px; height: 200px; overflow: auto;">
  <div id="content">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>