html - float hack 不会使滚动条出现..？

Question

我有一个网站有几个 <div>设置类似于此示例 http://jsfiddle.net/kLQ5z/1/

问题是，如果访问者的屏幕很小，outerContent将在屏幕外。
通常，滚动条会出现，但因为我设置了 <div>以如此骇人听闻的方式出现，它们不会出现，您甚至无法使用鼠标的水平滚动。

有什么帮助吗？

Answer 1

我玩过你的 jsFiddle 和 here's something that seems to work .基本上，我使用的是一个迭代过程:

1. 要在 float 框离开屏幕时显示滚动条，它必须位于内容区域内。

2. 一种方法是给主框一个固定的左边距，但要使其保持居中，然后我们需要用 margin: auto 将它包裹在一个外部 div 中。

3. 为了让它准确居中，我们还需要给它一个匹配的右边距。

4. 但理想情况下，如果屏幕太窄而无法完全显示，我们希望在任何滚动条出现之前挤出该边距。在 CSS 中有什么作用？表格单元格!因此，我们使用带有 display: table-cell 的空虚拟 div，而不是固定边距。

它仍然是 hack，如果不能改进，我会感到惊讶。我也没有很好地测试它，但它似乎至少可以在 Chrome 上运行。