如何使用Flex实现左侧固定Header和Footer的响应式页面布局？

下面是基于你的HTML结构，使用Flexbox实现需求的完整方案：

HTML 结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flex Layout</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        /* 小屏默认布局（流式） */
        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* 确保容器占满视口高度 */
        }

        header, footer {
            padding: 1.5rem;
            background-color: #f1f1f1;
            width: 100%;
        }

        section {
            flex: 1; /* 让内容区占满剩余空间，将footer推至页面底部 */
            padding: 2rem;
            overflow-y: auto; /* 内容超出时可滚动 */
        }

        /* 大屏布局（断点可根据需求调整，这里用1200px） */
        @media (min-width: 1200px) {
            .wrapper {
                position: fixed; /* 固定侧边栏 */
                left: 0;
                top: 0;
                width: 35%; /* 侧边栏宽度35% */
                height: 100vh;
                flex-direction: column;
                justify-content: space-between; /* header置顶，footer置底 */
                background-color: #f1f1f1;
            }

            section {
                margin-left: 35%; /* 内容区避开侧边栏 */
                height: 100vh;
                flex: initial; /* 取消小屏的flex-grow */
                overflow-y: auto;
            }

            header, footer {
                background-color: transparent; /* 继承wrapper背景，避免重复 */
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <header>
            <h1>Header Content</h1>
        </header>
        <footer>
            <p>Footer Content</p>
        </footer>
    </div>
    <section>
        <h2>Main Content Area</h2>
        <!-- 可添加大量测试内容验证滚动效果 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </section>
    <script src="/assets/js/scale.fix.js"></script>
</body>
</html>

关键实现细节说明 #

• 小屏布局：

  • .wrapper 使用 flex-direction: column，配合 min-height: 100vh 确保容器占满视口。
  • section 设置 flex: 1，自动填充header和footer之外的剩余空间，让footer始终处于页面底部。
  • 内容区超出时通过 overflow-y: auto 实现滚动。

• 大屏布局：

  • .wrapper 设置 position: fixed 固定在左侧，宽度35%，高度100vh。
  • 利用 justify-content: space-between 让header置顶、footer置底，无需额外定位。
  • section 设置 margin-left: 35% 避开侧边栏，同时设置 height: 100vh 和 overflow-y: auto 实现独立滚动。

• 响应式切换：通过媒体查询 @media (min-width: 1200px) 触发大屏布局，你可以根据实际需求调整断点宽度。

若需保留原始HTML结构（section在wrapper内），可修改大屏样式如下：

@media (min-width: 1200px) {
    body {
        display: flex;
    }
    .wrapper {
        width: 35%;
        position: fixed;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    section {
        flex: 1;
        margin-left: 35%;
        height: 100vh;
        overflow-y: auto;
    }
}

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