Question

以下是摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

当我在父div中放入2 div（＆＃34; bar＆＃34;，＆＃34; content＆＃34;）并将父div设置为固定宽度和高度时，overflow为auto以启用滚动条。然后设置＆＃34;内容＆＃34;的宽度大于其＆＃39;父＆＃39;宽度和＆＃34; bar＆＃34;宽度为100％。事实证明，＆＃34; bar＆＃34;的宽度将与其＆＃39;相同。父母，而不是它的＆＃39;兄弟姐妹＆＃34;内容＆＃34;。因此，当您滚动它时，＆＃34; bar＆＃34;将滚动而不是保持...

我们可以保留任何解决方案＆＃34; bar＆＃34;在顶部或将其设置为100％宽度作为其＆＃39;兄弟姐妹＆＃34;内容＆＃34; DIV？

谢谢！

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

#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>

滚动条的HTML / CSS全宽问题

2 个答案: