Question

我在一个网站上工作，该网站的主要内容块太宽，无法完全适合较小的分辨率屏幕。

内容位于屏幕中间。

当内容不适合屏幕内部时，我需要一个水平滚动条。

我强制水平滚动条显示div：

<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>

问题：如果我最初在大分辨率屏幕（或更宽的窗口）中打开网站，然后使浏览器窗口更窄，滚动条就会出现在它应该的位置。但是 - 如果我继续使窗口变窄，则滚动条手柄停留在左侧，向左滚动变得不可能。此外，如果浏览器窗口最初小于内容，则滚动条一直显示在左侧，我无法向左滚动更多内容以显示隐藏内容的左侧。

问题：如何将卷轴强制到中间，以便我可以向左滚动以显示内容的隐藏部分？

我很感激你的建议！

Answer 1

我演示的JSFiddle：http://jsfiddle.net/Y9DCs/

从我所看到的，现在你有一个2列布局：

左侧是包含菜单的“访问”面板。右侧是您的主要内容区域。

我认为你可能会更好地拥有一个包含3个部分的主容器：

|----------------wrapper---------------------|
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|  Menu   |       Content        |   Dummy   |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|--------------------------------------------|

然后你可以将包装器的宽度调整为Content +（2 * Menu），并给它边距：0 auto;

Menu和Dummy的宽度相同，但dummy只是一个没有内容的div。

这样可以有效地调整屏幕中心区域的整个区域，菜单显示为悬挂在内容的左侧。

Answer 2

经过一天的反复试验后，我找到了自己的解决方案，在很大程度上受到Jordan在回答我的问题时提出的建议的启发。虽然我的解决方案与乔丹提供的解决方案不同，但我欠他的，因为他让我思考正确的方向。

总的来说，我试着要小心人们关于彻底重新排列CSS的建议。在这个特殊情况下，它是不可能的，因为我的网站的布局比乔丹的jsFiddle示例更复杂，并且jQuery动画效果的种类只有我正在使用的那种定位才有可能。

我的“胶带”解决方案涉及将主块的每个元素包装在以margin：0 auto为中心的独立包装中。这样我就不需要将#access div放在#wrapper div中了（这是最大的挑战，因为它破坏了动画。）

我的解决方案也不涉及创建三列布局（由Jordan提出）或“虚拟”div。事实证明这是不必要的，因为我只想揭示网站的左侧（菜单）。

不过，我想再次强调，如果不与约旦沟通，我将无法解决这个问题。这就是为什么我将乔丹的答案标记为“被接受”。

非常感谢，乔丹！

Answer 3

你只需要将所有内容包装在名为main_wrapper的div中，然后给它填充左边：20px或任何符合你想象的内容

CSS（或jQuery）：如何在中间位置设置水平滚动条？

3 个答案: