如何垂直固定div而不是水平？

Question

这是我的设置：

<div id="header-container">
    <div id="header">
        this is the header part. i want to be able to scroll this one horizontally but not vertically
    </div>    
</div>

<div id="maincontent">
    here some text just to show that the div is scrolling vertically.
</div>

在CSS中，我将#header-container位置设置为fixed，因此效果很好，不会垂直和水平滚动

但我想要发生的是垂直修复#header-container div并能够水平滚动它，这样当我调整窗口大小时，我仍然可以读取#header div的全部内容通过滚动

提前致谢！这是fiddle

Answer 1

在使标题可滚动时，我没有看到任何美学或设计价值。更好的方法是调整标题的内容大小，或者在浏览器空间非常宝贵时删除标题的一部分。媒体查询对此非常有用。

如果您仍想使标题内容可滚动，则可以将overflow-x：auto声明添加到标题容器中。只要没有足够的水平空间，滚动条就会弹出，用户可以水平滚动。但是，就像我说的那样，这不是最好的设计。

关于您的代码的一些评论。首先，标题的高度可以是100％。这样你只需要调整标题容器的大小，它的标题子将相应地缩放。其次，绝对定位应该用于精确放置元素。在你的情况下，位置：绝对和左：40px声明只能用一个边距替换：40px，这更经济。