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

【问题标题】：How do i fix a div vertically but not horizontally?如何垂直而不是水平地固定 div？
【发布时间】：2014-06-22 01:39:26
【问题描述】：

这是我的设置：

<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

【问题讨论】：

一个更聪明的想法是让标题成为动态宽度，这样就不需要水平滚动。但是，如果您确定使用 javascript 来修复它，则必须使用absolute 定位，更改window.onscroll 上的top 位置，然后调整页面宽度与标题一样宽（因为它是绝对定位的，所以不会自动检测到）
@Twish 不知道你想要什么。请解释清楚

标签： javascript jquery html css

【解决方案1】：

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

如果你仍然想让 header 内容可滚动，那么你可以在 header-container 中添加 overflow-x: auto 声明。每当水平空间不足时，滚动条就会弹出，用户可以水平滚动。但是，就像我说的，这不是最好的设计。

关于您的代码的几个 cmets。首先，标题的高度可以是 100%。这样你只需要调整标题容器的大小，它的标题子容器就会相应地缩放。其次，绝对定位应该用于元素的精确放置。在您的情况下， position: absolute 和 left: 40px 声明可以只替换为一个 margin-left: 40px，这样更经济。

【讨论】：