html - HTML 和 CSS 标题栏布局问题

Question

我正在尝试设置一个具有固定位置标题栏的 HTML 文档，该标题栏将包含应用程序的所有菜单选项；该栏应固定在页面顶部。栏的实际内容部分的最小宽度应为 1000 像素，并且应包含在一个包装器中，如果页面大于 1000 像素，该包装器将填充所有剩余空间，并使内容部分居中。

我已经能够执行以下操作，使用 display: fixed 我可以在垂直滚动时让栏粘在页面顶部，但是如果页面是 <1000px，水平滚动不会显示栏的其余部分，它会固定在固定的 0,0 位置。

更改为 display: relative，水平滚动时栏的行为符合预期 - 我可以看到它的右半部分 - 但是这不允许它固定在文档的顶部垂直滚动。我如何调整以下内容以使条形图以这种方式运行。

HTML:

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Navigation -->
    <div id="nav_wrapper">

        <!-- Navigation Wrapper -->
        <div id="nav_content">

            <!-- Navigation Title -->
            <div id="nav_title">
                some content
            </div>
        </div>
    </div>

    <!-- Body -->

</div>

导航栏css:

#wrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150%;
    min-width: 1000px;
}

#nav_wrapper {
    display: block;
    position: fixed;
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    min-width: 1000px;
}

#nav_content {
    display: block;
    position: relative;
    top: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

同样，将 nav_wrapper 显示样式设置为 fixed 允许我垂直滚动且条形贴在顶部但不允许我水平滚动以查看溢出内容,

将它设置为 relative 允许我水平滚动以查看栏的溢出内容但不允许栏在我垂直滚动时粘在页面顶部，我正在寻找能够做到这两点。

非常感谢任何帮助。干杯。

这里正在处理 jsFiddle

编辑

Maximillian 发布了一个 excellent working example with the behavior I am hoping to achieve ，但是使用 javascript。如果可能，我正在寻找纯 HTML/CSS 解决方案。

Answer 1

我很确定您无法使用纯 HTML 和 CSS 使固定位置的 div 随窗口一起滚动，因此这是一个 JavaScript 解决方案。

现场演示:

var nav_wrapper = document.getElementById("nav_wrapper");
window.onscroll = function() {
    nav_wrapper.style.left = -pageXOffset + "px";
};

#wrapper {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150%;
    min-width: 1000px;
    background: gray;
}

#nav_wrapper {
    display: block;
    position: fixed;
    width: 100%;
    height: 48px;
    top: 0px;
    left: 0px;
    min-width: 1000px;
    background: blue;
}

#nav_content {
    display: block;
    position: relative;
    top: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background: red;
}

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- Navigation -->
    <div id="nav_wrapper">

        <!-- Navigation Wrapper -->
        <div id="nav_content">

            <!-- Navigation Buttons -->
            <div id="nav_main">
                Buttons
            </div>

            <!-- Navigation Title -->
            <div id="nav_title">
                Title
            </div>

            <!-- Navigation Options -->
            <div id="nav_options">
                Options
            </div>
        </div>
    </div>

    <!-- Body -->

</div>

JSFiddle 版本:https://jsfiddle.net/2j2mx5mu/