本教程详细探讨了在网页设计中如何实现固定头部和侧边栏，同时有效管理主内容区域的滚动行为。文章提供了两种核心解决方案：一是通过计算视口高度实现内部区域滚动，适用于需要特定区域独立滚动的场景；二是通过定位属性固定头部和侧边栏，让主内容区利用浏览器原生滚动条，提供更符合传统浏览习惯的用户体验。教程包含具体css和html代码示例，并强调了关键属性的应用。

在现代网页设计中，固定头部（Header）和侧边栏（Sidebar）是常见的布局模式，它们能确保导航和重要信息始终可见。然而，当内容区域需要容纳大量信息时，如何优雅地处理其滚动行为，同时保持整体布局的稳定性和响应性，成为了一个挑战。本文将深入探讨两种主流的解决方案，帮助开发者构建出既美观又实用的网页布局。

挑战分析

在构建带有固定头部和侧边栏的布局时，我们通常面临以下两个主要问题：

内容区域高度管理与内部滚动： 当内容区域（例如，多个“section”）被设定为父容器的100%高度时，如果某个section内的内容过多，它会撑开父容器，导致所有section的高度不再一致。理想情况是section自身保持固定高度，而其内部内容溢出时能够独立滚动。
视口高度变化时的整体滚动： 当浏览器窗口的高度小于页面内容所需的高度时，如何确保整个页面（或特定区域）能够正常滚动，避免内容被截断。

为了解决这些问题，我们将介绍两种不同的实现策略。

方案一：全视口布局与内容区域内部滚动

这种方案适用于希望整个页面利用视口高度，且特定内容区域拥有独立滚动条的场景。例如，一个仪表盘或单页应用，其中主要内容区需要内部滚动，而头部和侧边栏保持静止。

核心思想

使用 100vh 将根元素（html, body）和主容器的高度设定为视口高度。
通过Flexbox布局将页面划分为头部和主内容区。
主内容区的高度通过 calc() 函数动态计算，减去头部的高度。
在需要内部滚动的具体内容容器上应用 overflow-y: scroll。

HTML 结构




    全视口布局示例


    
        HEADER
    

    
        侧边栏
        
            这里是主要内容区域，当内容过多时，本区域将独立滚动。
            文章标题 1
一些内容...

* { margin: 0; box-sizing: border-box; /* 重要：确保padding和border不增加元素总尺寸 */ } html, body { height: 100vh; /* 将根元素和body的高度设置为视口高度 */ margin: 0; } header { text-align: center; background-color: red; height: 100px; /* 重要：固定头部高度 */ } main { height: calc(100vh - 100px); /* 重要：主内容区高度 = 视口高度 - 头部高度 */ display: flex; /* 使用Flexbox布局侧边栏和内容区 */ border: 2px solid red; /* 仅为演示边框 */ } aside { padding: 0 2em; background-color: lightgrey; flex-shrink: 0; /* 侧边栏不收缩 */ } section { flex: 1; /* 内容区占据剩余空间 */ overflow-y: scroll; /* 重要：内容区内部滚动 */ background-color: lightblue; padding: 1em; } article { background-color: white; border-top: 1px solid #ccc; margin-bottom: 1em; padding: 1em; }

固定定位布局示例

HEADER

左侧边栏右侧边栏

这里是主内容区域，当整个页面内容过多时，浏览器将出现滚动条。

文章标题 A

一些内容...

文章标题 B (内部滚动)

这里是内部滚动的内容...

文章标题 C

一些内容...

文章标题 D

一些内容...

* { margin: 0; box-sizing: border-box; /* 重要：确保padding和border不增加元素总尺寸 */ } body { /* body无需设置100vh，让其根据内容自动撑开 */ min-height: 100vh; /* 至少占据一个视口高度，确保初始有内容 */ } header { /* 重要：固定头部 */ position: fixed; top: 0; left: 0; width: 100%; height: 100px; /* 头部高度 */ z-index: 999; /* 确保头部在最上层 */ text-align: center; background-color: red; color: white; line-height: 100px; } aside { /* 重要：固定侧边栏 */ position: fixed; top: 100px; /* 侧边栏从头部下方开始 */ width: 75px; /* 侧边栏宽度 */ height: calc(100vh - 100px); /* 侧边栏高度 = 视口高度 - 头部高度 */ z-index: 999; overflow-y: auto; /* 如果侧边栏内容过多，自身可滚动 */ text-align: center; background-color: grey; color: white; padding-top: 1em; } .sidebar-left { left: 0; } .sidebar-right { right: 0; } main { /* 重要：主内容区域定位，避开固定元素 */ position: absolute; /* 相对于最近的定位祖先或初始包含块定位 */ top: 100px; /* 避开头部 */ left: 75px; /* 避开左侧边栏 */ width: calc(100% - 150px); /* 宽度 = 视口宽度 - 左右侧边栏宽度 */ min-height: calc(100vh - 100px); /* 最小高度确保占据屏幕空间，防止内容过少时出现空白 */ border: 2px solid blue; /* 仅为演示边框 */ padding: 1em; background-color: #f0f0f0; } article { /* 如果某些文章内容也需要内部滚动 */ height: 350px; /* 固定文章高度 */ overflow-y: auto; /* 内部滚动 */ background-color: white; border-top: 1px solid #ccc; margin-bottom: 1em; padding: 1em; }