实现双层可独立滚动HTML/CSS布局，含顶部导航与右侧固定子导航

嘿，我来帮你搞定这个布局问题！你想要的带顶部导航、右侧固定子导航的双栏独立滚动效果，用现代CSS布局就能轻松实现，比你之前用position: absolute的方式更灵活好维护。

核心思路 #

1. 顶部导航固定在页面顶部，不随滚动移动
2. 下方主内容区分成左右两栏，每栏各自独立垂直滚动
3. 右侧栏内的子导航使用position: sticky，滚动时固定在顶部导航的下方

完整代码示例 #

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双栏滚动布局</title>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="top-nav">
        <h1>全局顶部导航</h1>
    </header>

    <!-- 主内容容器 -->
    <main class="main-container">
        <!-- 左侧栏 -->
        <section class="left-col">
            <h2>左侧内容区</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
            <!-- 重复内容模拟滚动 -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem.</p>
        </section>

        <!-- 右侧栏 -->
        <section class="right-col">
            <!-- 右侧固定子导航 -->
            <nav class="sub-nav">
                <a href="#section1">子导航1</a>
                <a href="#section2">子导航2</a>
                <a href="#section3">子导航3</a>
            </nav>

            <div id="section1" class="right-content">
                <h3>右侧内容区块1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem. Vestibulum tempus velit vel neque rutrum congue. Donec vehicula dictum mi, sit amet suscipit augue rhoncus vitae. Curabitur tempus auctor bibendum. Sed sodales iaculis egestas. Suspendisse consectetur elementum ligula et imperdiet. Proin in velit eu arcu dapibus faucibus. Vivamus fringilla adipiscing mauris ac condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nibh ac nulla tempus malesuada. Ut congue, arcu quis semper pellentesque, nunc quam volutpat libero, a rhoncus metus sem eu dolor. Vestibulum lacinia augue sit amet nibh imperdiet eu volutpat nibh egestas. Suspendisse luctus laoreet mattis. Proin in euismod augue. Duis tincidunt rhoncus auctor.</p>
            </div>
            <div id="section2" class="right-content">
                <h3>右侧内容区块2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem. Vestibulum tempus velit vel neque rutrum congue. Donec vehicula dictum mi, sit amet suscipit augue rhoncus vitae. Curabitur tempus auctor bibendum. Sed sodales iaculis egestas. Suspendisse consectetur elementum ligula et imperdiet. Proin in velit eu arcu dapibus faucibus. Vivamus fringilla adipiscing mauris ac condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nibh ac nulla tempus malesuada. Ut congue, arcu quis semper pellentesque, nunc quam volutpat libero, a rhoncus metus sem eu dolor. Vestibulum lacinia augue sit amet nibh imperdiet eu volutpat nibh egestas. Suspendisse luctus laoreet mattis. Proin in euismod augue. Duis tincidunt rhoncus auctor.</p>
            </div>
            <div id="section3" class="right-content">
                <h3>右侧内容区块3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ligula turpis, in euismod velit. Sed suscipit commodo nisl ac tempor. Donec eu nulla eros. Donec tortor justo, eleifend eu consectetur at, fermentum a sem. Vestibulum tempus velit vel neque rutrum congue. Donec vehicula dictum mi, sit amet suscipit augue rhoncus vitae. Curabitur tempus auctor bibendum. Sed sodales iaculis egestas. Suspendisse consectetur elementum ligula et imperdiet. Proin in velit eu arcu dapibus faucibus. Vivamus fringilla adipiscing mauris ac condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut nibh ac nulla tempus malesuada. Ut congue, arcu quis semper pellentesque, nunc quam volutpat libero, a rhoncus metus sem eu dolor. Vestibulum lacinia augue sit amet nibh imperdiet eu volutpat nibh egestas. Suspendisse luctus laoreet mattis. Proin in euismod augue. Duis tincidunt rhoncus auctor.</p>
            </div>
        </section>
    </main>
</body>
</html>

CSS 样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 顶部导航：固定在页面顶部 */
.top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

/* 主内容容器：设置margin-top避开顶部导航，用Grid布局分左右栏 */
.main-container {
    display: grid;
    grid-template-columns: 20% 80%; /* 左右栏比例，可按需调整 */
    margin-top: 60px; /* 和顶部导航高度一致 */
    height: calc(100vh - 60px); /* 占满剩余视口高度 */
}

/* 左侧栏：独立滚动 */
.left-col {
    background-color: #ddd;
    padding: 2em;
    overflow-y: auto;
}

/* 右侧栏：独立滚动，作为sticky元素的父容器 */
.right-col {
    background-color: #bbb;
    padding: 0 2em;
    overflow-y: auto;
}

/* 右侧固定子导航：sticky定位，top值等于顶部导航高度 */
.sub-nav {
    position: sticky;
    top: 60px; /* 和顶部导航高度一致，保证子导航在顶部导航下方固定 */
    background-color: #34495e;
    padding: 1em;
    margin: 2em 0;
    border-radius: 4px;
}

.sub-nav a {
    color: white;
    margin-right: 1em;
    text-decoration: none;
}

.sub-nav a:hover {
    text-decoration: underline;
}

.right-content {
    margin-bottom: 3em;
}

关键细节说明 #

1. box-sizing: border-box：全局设置，避免padding和border影响元素的实际宽度，布局更可控。
2. 顶部导航的position: fixed：固定在视口顶部，z-index设为较高值，确保不会被其他内容覆盖。
3. Grid布局的主容器：用grid-template-columns快速划分左右栏比例，height: calc(100vh - 60px)确保主容器占满顶部导航下方的所有视口高度。
4. 两侧栏的overflow-y: auto：当内容超出栏高时自动显示滚动条，实现独立滚动。
5. 右侧子导航的position: sticky：这是实现右侧固定子导航的关键，top: 60px保证子导航始终在顶部导航的下方，不会被覆盖。

为什么你的原代码无法满足需求？ #

你之前用position: absolute的方式，虽然能实现双栏滚动，但元素脱离了文档流，顶部的导航元素会被双栏覆盖，而且很难配合固定定位的导航使用。现代CSS布局（比如Grid、Flex）更适合这种结构化的页面布局，代码更简洁，维护性也更强。

内容的提问来源于stack exchange，提问作者user1827421