HTML & CSS：不能在较大的固定 100% 宽度 div 内制作 div，溢出时可滚动答案

【问题标题】：HTML & CSS: Can't make div inside of larger fixed, 100% width div, scrollable on overflowHTML & CSS：不能在较大的固定 100% 宽度 div 内制作 div，溢出时可滚动
【发布时间】：2023-03-10 09:40:02
【问题描述】：

我正在使用与此类似的一段 HTML：

<div id='headerBar'>
    <div id='headerBarContent'>
        <div id='leftContentSubdiv'></div>
        <div id='rightContentSubdiv'></div>
    </div>
</div>

使用这样的 CSS：

#headerBar
{
    position: fixed;
    left: 0px;
    right: 0px;

    min-width: 1024px;
    width: 100%;
    height: 34px;

    z-index: 10000;
}

#headerBarContent
{
    display: inline-block;

    position: absolute;
    left: 50%;
    margin-left: -512px;

    width: 1024px;
}

#leftContentSubdiv, #rightContentSubdiv
{
    position: relative;

    width: 512px;
    height: 34px;
}

我要创建的是一个标题栏，它会随着页面垂直滚动，并且当窗口小于 headerBarContent 的宽度时水平滚动，而不使用 JavaScript。

Facebook 完全按照我指定的方式实现它，而不使用 JavaScript。
Twitter 用 JavaScript 实现它
The Onion 说明了我现在的困境。页面无法一旦页面的其余部分水平滚动标题栏窗口大小小于标题的居中内容

我无法弄清楚 Facebook 在标记中究竟在做什么具有此功能。有人可以帮忙吗？

【问题讨论】：

看起来它现在工作得很好......你修好了吗？你用的是什么浏览器？
同意。不确定您在寻找什么，但我发现 Facebook 和 Onion 工具栏的行为没有区别。
@Ryan，你确定它有效吗？当然，它可以随着页面垂直滚动，但是当您将窗口的宽度调整为小于 1024 像素时，标题栏是否会随着页面的其余部分水平滚动？它不适用于我的示例和 The Onion （这就是我卡住的地方）。我使用 Opera 开发。
对我来说，在 Chrome、Firefox 和 IE9 中 Facebook 和 Onion 与我的行为相同。也许我还没有真正理解你想要什么？或者可能是 Opera 导致了问题？你在其他浏览器中测试过吗？
您不能以您想要的方式滚动fixed 元素。它的全部意义在于当窗口移动时它不会移动。您可以使用 Javascript 来实现此效果。请参阅此 stackoverflow 答案：stackoverflow.com/a/4676352/681807

标签： html css

【解决方案1】：

如果我正确理解您的问题，如果屏幕

media queries 即：

@media screen and (max-width: 1024px){
    #headerBar{
        position:relative;
    }
}

演示http://jsfiddle.net/BPcfB/

【讨论】：

小提琴在 Chrome 中似乎对我不起作用，对不起，我的理解中不适合我正在寻找的东西
刚试过.. 它在 Chrome (15) 中工作.. 尝试调整“结果”面板的大小以查看行为
是的，似乎允许水平滚动，但在 Firefox 和 Chrome 中将位置更改为“相对”后，页面的垂直滚动将被禁用
你可以在@media screen and (max-width : 1024)里面设置你想要的任何样式...基本上是一个条件，如果屏幕小于1024，覆盖@headerBar的样式:)
对不起伙计，我刚刚意识到你只是在处理水平行为！我正在查看您的答案中也未解决的垂直行为，他还希望当您从我理解的内容向下滚动页面时修复该栏，并且当我向下滚动该栏时，该栏会显示文本。