使没有内容的 div 水平滚动答案

【问题标题】：Making a div having no contents scroll horizontally使没有内容的 div 水平滚动
【发布时间】：2011-12-07 03:47:09
【问题描述】：

<div id="dummyHorizontalDiv" style="height:16px !important;width: 550px;overflow-x:auto;overflow-y:hidden;">
      <div id="dummyScrollArea" style="width: 750px;">
      </div>
</div>

我想在div 和id=dummyHorizontalDiv 上获得一个水平滚动条，但由于内部 div 中没有内容（尽管它的宽度大于外部 div 的宽度），我没有得到水平滚动吧。

请帮我解决这个问题。

【问题讨论】：

你的代码对我有用，我看到水平滚动条：jsfiddle.net/uZ4Yw/1
它对我有用...你能解释一下你真正想要实现的目标吗？另外，添加“溢出-x：滚动；”对于 dummyHorizontalDiv，无论如何都会强制滚动条显示
@xbonez LOL，两者几乎在同一时间，相差 10 秒（：
因为你给了内部 div 一个高度。

标签： javascript jquery html css horizontal-scrolling

【解决方案1】：

您确实有滚动条，但您的 dummyHorizontalDiv 实际上太短而无法显示它们 - 如果滚动条大于它们正在滚动的元素，浏览器将不会在滚动条中绘制。将 16 像素的高度更改为 30 像素，您会看到滚动条出现。

【讨论】：

【解决方案2】：

给div#dummyScrollArea 一些高度。

【讨论】：

【解决方案3】：

试试 display:block - 如果你不指定，宽度和高度在 CSS 世界中是一种“建议”

请看这里：http://laughingsquid.com/wp-content/uploads/css-is-awesome-20090407-142244.jpg

【讨论】：

【解决方案4】：

您必须对代码进行 2 处更改才能使其正常工作，它们是：

增加外部DIV(#dummyHorizontalDiv)高度，因为当前高度(16px)不足以显示滚动条。
为内部 DIV(#dummyScrollArea) 设置一些高度。

下面指定了调整后的代码块，检查一次，如果仍然不适合你，请告诉我。

<div id="dummyHorizontalDiv" style="height:30px !important;width: 550px;overflow-x:auto;overflow-y:hidden; border: 1px solid red;">
  <div id="dummyScrollArea" style="width: 750px; height: 100%;">
  </div>
</div>

【讨论】：