本教程详细探讨如何构建具有固定头部、侧边栏和动态可滚动内容区域的 网页布局 。文章将介绍两种核心解决方案：一是利用视口高度（`vh`）和 弹性布局 实现内部区域滚动，适用于需要特定区域独立滚动且其他区域高度固定的场景；二是采用 `position: fixed` 定位固定元素，并调整主内容区域以适应 浏览器 原生滚动，适用于更传统的长页面布局。通过代码示例和关键 css 属性解析，帮助开发者掌握创建响应式且用户体验友好的复杂布局技巧。
一、理解布局挑战与目标
在现代 网页设计 中，固定头部（Header）和侧边栏（Sidebar）是常见的布局元素，它们能提供持久的导航和上下文信息。同时，内容区域（Content）需要灵活地容纳大量信息，并在必要时提供滚动功能。本教程旨在解决以下核心问题：
- 固定元素的高度与位置管理： 确保头部和侧边栏在页面滚动时保持固定，不随内容滚动而移动。
- 内容区域的高度控制： 当内容量超出预期时，如何让内容区域内部滚动，而不是导致整个页面结构被撑开。
- 视口高度的充分利用： 如何确保布局能够有效利用浏览器视口的高度，尤其是在视口高度变化时仍能保持良好的显示效果。
我们将通过两种主要的 CSS 布局策略来解决这些问题。
二、解决方案一：全视口布局与内部区域滚动
这种方案适用于需要将整个页面视为一个固定高度的容器（例如，100% 视口高度），并在其中某个特定区域实现内部滚动，同时保持其他区域高度固定的场景。这对于实现类似“单页应用”或具有“吸附滚动”效果的页面非常有用。
1. 核心思想
- 使用 height: 100vh 将 html 和 body 元素设置为占据整个视口高度。
- 利用 Flexbox 布局管理主容器（.site）内的元素（头部、主内容区）。
- 通过 calc()函数动态计算主内容区（main）的高度，使其填充剩余空间。
- 在需要滚动的具体内容区域（例如，section）上应用 overflow-y: scroll。
2. HTML 结构示例
<!DOCTYPE html> <html> <head> <title> 全视口布局示例 </title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>HEADER</p><p><span> 立即学习 </span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank"> 前端免费学习笔记（深入）</a>”；</p> </header> <main> <aside>sidebar</aside> <section> <p> 现在，我希望这里面的内容在这个 section 内部溢出滚动，但 section 本身必须保持相同的高度。如果你运行这个 emmet，就可以看到问题：</p> <article><h1> 文章标题 </h1><p> 一些内容 </p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/2293"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/175704235960585.png" alt="Tunee AI"> </a> <div class="aritcle_card_info"> <a href="/ai/2293">Tunee AI</a> <p> 新一代 AI 音乐智能体 </p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Tunee AI"> <span>1104</span> </div> </div> <a href="/ai/2293" class="aritcle_card_btn"> <span> 查看详情 </span> <img src="/static/images/cardxiayige-3.png" alt="Tunee AI"> </a> </div> </article> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> </section> <aside>sidebar</aside> </main> </body> </html>3. 关键 CSS 规则
* {margin: 0; box-sizing: border-box; /* 确保内边距和边框不增加元素总尺寸 */} 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; /* 侧边栏宽度可根据需要设定 */} section {flex: 1; /* 关键：内容区占据剩余空间 */ overflow-y: scroll; /* 关键：内容溢出时在 section 内部垂直滚动 */} article {background-color: lightblue; border-top: 2px solid black; padding-bottom: 40vh; /* 模拟大量内容，确保滚动条出现 */}4. 解释与注意事项
- box-sizing: border-box;：这是一个非常重要的重置规则，它确保元素的 width 和 height 属性包含了 padding 和 border，从而避免因内边距或边框导致元素尺寸超出预期。
- header 的高度是固定的（100px）。
- main 的高度通过 calc(100vh – 100px)精确计算，确保它占据了视口中除头部以外的所有垂直空间。
- main 内部的 aside 和 section 通过 display: flex 进行布局。section 设置 flex: 1 使其填充可用空间。
- section 上的 overflow-y: scroll 是实现内部滚动的核心。当 section 内的内容超出其计算出的高度时，就会出现垂直滚动条。
- article 中的 padding-bottom: 40vh 仅用于模拟内容过多，实际应用中内容会自然撑开。
这种方法确保了头部和侧边栏始终可见，并且主内容区域的高度始终适配视口，内部内容则通过滚动条进行访问。
三、解决方案二：固定头部 / 侧边栏与浏览器原生滚动
此方案更符合传统网页的滚动习惯，即整个页面（除固定元素外）通过浏览器原生的滚动条进行滚动。头部和侧边栏通过 position: fixed 属性保持固定。
1. 核心思想
- 使用 position: fixed 将头部和侧边栏从文档流中移除，并固定在视口中的特定位置。
- 通过 top、left、width、height 属性精确控制固定元素的位置和尺寸。
- 为避免固定元素遮挡主内容，主内容区域（main）需要通过 position: absolute 或调整 padding 来定位，使其起始位置在固定元素下方或旁边。
- 如果主内容区域内的某个子元素也需要内部滚动，可以对其应用 overflow-y: auto 并设定固定高度。
2. HTML 结构示例
<!DOCTYPE html> <html> <head> <title> 固定元素与原生滚动布局示例 </title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 固定元素 --> <header>HEADER</header> <aside class="sidebar-left">sidebar</aside> <aside class="sidebar-right">sidebar</aside> <main> <p> 现在，我希望这里面的内容在这个 section 内部溢出滚动，但 section 本身必须保持相同的高度。如果你运行这个 emmet，就可以看到问题：</p> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> <article><h1> 文章标题 </h1><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p><p> 一些内容 </p></article> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> <article><h1> 文章标题 </h1><p> 一些内容 </p></article> </main> </body> </html>3. 关键 CSS 规则
* {margin: 0; box-sizing: border-box; /* 确保内边距和边框不增加元素总尺寸 */} header {position: fixed; /* 关键：固定头部 */ top: 0; left: 0; width: 100%; height: 100px; /* 固定头部高度 */ z-index: 999; /* 确保头部在最上层 */ text-align: center; background-color: red;} aside {position: fixed; /* 关键：固定侧边栏 */ top: 100px; /* 侧边栏从头部下方开始 */ width: 75px; /* 固定侧边栏宽度 */ height: calc(100vh - 100px); /* 侧边栏高度 = 视口高度 - 头部高度 */ z-index: 999; /* 确保侧边栏在最上层 */ overflow-y: auto; /* 如果侧边栏内容过多，自身可滚动 */ text-align: center; background-color: grey; } .sidebar-left {left: 0; /* 左侧边栏 */} .sidebar-right {right: 0; /* 右侧边栏 */} main {position: absolute; /* 关键：主内容区使用绝对定位，避免被固定元素遮挡 */ top: 100px; /* 主内容区从头部下方开始 */ left: 75px; /* 主内容区从左侧边栏右侧开始 */ width: calc(100% - 150px); /* 主内容区宽度 = 视口宽度 - 左右侧边栏宽度 */ min-height: calc(100% - 100px); /* 确保主内容区至少占据剩余视口高度 */ border: 2px solid red; /* 实际内容会撑开 main 的高度，浏览器出现滚动条 */ } article {height: 350px; /* 关键：如果 article 内容也需要内部滚动，则需固定其高度 */ overflow-y: auto; /* 关键：article 内部内容溢出时垂直滚动 */ background-color: lightblue; border-top: 2px solid black;}4. 解释与注意事项
- header 和 aside 都设置为 position: fixed，并使用 top、left、width、height 属性精确放置。z-index 确保它们始终位于内容之上。
- aside 的 height: calc(100vh – 100px)使其占据头部以下的所有垂直视口空间。overflow-y: auto 允许侧边栏在自身内容过多时滚动。
- main 元素被设置为 position: absolute，并使用 top 和 left 属性将其定位在固定元素（头部和侧边栏）之外的区域。其 width 和 min-height 也通过 calc()计算，以适应可用空间。
- main 的高度会根据其内部内容自动撑开，当内容超出视口高度时，浏览器将出现滚动条。
- 如果 main 内部的某个 article 元素也需要内部滚动，则需要像示例中那样为其设置固定高度（height: 350px）和 overflow-y: auto。
这种方法提供了更自然的滚动体验，用户习惯于使用浏览器的主滚动条来浏览长页面。
四、总结与选择建议
两种解决方案各有侧重：
-
全视口布局与内部区域滚动（方案一）：
- 优点：布局高度始终与视口匹配，非常适合单页应用、仪表盘或需要实现“吸附滚动”（snap scrolling）效果的页面。
- 缺点：如果页面内容非常长，用户可能需要在多个内部滚动区域之间切换，体验可能不如浏览器原生滚动流畅。
- 适用场景：内容被明确划分为几个固定高度的“屏幕”或“部分”，每个部分内部有自己的滚动需求。
-
固定头部 / 侧边栏与浏览器原生滚动（方案二）：
- 优点：符合大多数用户对网页滚动的直觉，内容可以无限延伸，浏览器原生滚动条提供平滑体验。
- 缺点：需要仔细管理主内容区域的定位，以避免被固定元素遮挡。
- 适用场景：传统的博客、新闻网站、产品详情页等，内容长度不确定且用户习惯通过主滚动条浏览。
在实际开发中，应根据项目需求和用户体验目标来选择最合适的布局方案。理解 vh、calc()、Flexbox、position: fixed 和 overflow 等 CSS 属性是构建复杂且 响应式布局 的关键。始终记得使用 box-sizing: border-box 以简化盒模型计算。
