Question

<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的宽度），我不是得到水平滚动条。

请帮我解决这个问题。

Answer 1

给div#dummyScrollArea一些高度。

Answer 2

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

Answer 3

尝试显示：阻止 - 如果你没有指定，宽度和高度是CSS世界中的“建议”

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

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

使没有内容的div水平滚动

4 个答案: