本文探讨了两种构建具有固定头部和侧边栏的web布局策略。第一种方案通过精确计算视口高度，使主内容区域内部滚动；第二种方案则利用position: fixed创建固定元素，并允许主内容区域及其内部独立可滚动模块自然流动，从而解决内容溢出及整体页面滚动问题，提升用户体验。
在现代Web开发中，创建具有固定头部（Header）和侧边栏（Sidebar），同时保持主内容区域可灵活滚动、适应不同屏幕尺寸的布局是一个常见需求。开发者常常面临内容溢出导致页面结构混乱，或在视口高度变化时无法正确滚动的问题。本教程将深入解析两种有效的CSS布局策略，帮助您构建结构清晰、用户体验良好的页面。
理解核心问题
原始问题描述了两个主要挑战：
- 内容区域内部分区（sections）高度固定，但其内部内容溢出时，希望分区内部滚动，而非使分区自身高度增加。 此外，当滚动到分区底部时，希望能够滚动到下一个分区。这暗示了需要对每个内容模块进行独立的高度管理和溢出处理。
- 当整个浏览器窗口高度减小时，希望整个网站（.site）能够溢出滚动。 这意味着在极端情况下，整个布局应允许浏览器原生滚动条出现。
我们将通过两种不同的CSS方法来解决这些问题，每种方法适用于不同的场景和用户体验需求。
关键CSS概念
在深入解决方案之前，了解以下CSS属性至关重要：
立即学习“前端免费学习笔记（深入）”；
- box-sizing: border-box;: 确保元素的 width 和 height 包含 padding 和 border，简化尺寸计算。
- height: 100vh;: 设置元素高度为视口（viewport）高度的100%。
- calc(): CSS函数，用于执行数学运算，常用于动态计算尺寸。
- display: flex;: 弹性盒子布局，用于在容器中排列项目，提供强大的对齐和分布能力。
- flex: 1;: 在Flex容器中，使项目占据所有可用空间。
- overflow-y: scroll; / overflow-y: auto;: 控制元素垂直方向上的内容溢出行为。scroll 始终显示滚动条，auto 在内容溢出时显示滚动条。
- position: fixed;: 使元素相对于视口固定定位，不随页面滚动。
- position: absolute;: 使元素相对于最近的已定位祖先元素（或初始包含块）进行定位。
- z-index;: 控制定位元素的堆叠顺序。
方案一：视口约束与主内容区域内部滚动
这种方法适用于整个页面被设计为单屏应用，或主要交互集中在一个大型滚动区域内的场景。它通过精确计算视口高度，将固定元素排除在外，使剩余空间由主内容区域占据并实现内部滚动。
核心思路
- 将 html 和 body 设置为 100vh 高度，确保整个页面占满视口。
- 定义 header 的固定高度。
- 使用 calc() 函数计算 main 区域的高度，使其等于 100vh 减去 header 的高度。
- 将 main 区域设置为弹性容器，并使其内部的 section （代表主要内容区域）具有 overflow-y: scroll; 属性。这样，当 section 内的内容溢出时，只有 section 内部会出现滚动条。
示例代码
HTML 结构:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Header, Scrollable Main</title>
</head>
<body>
<header>
<p>HEADER</p>
</header>
<main>
<aside>sidebar</aside>
<section>
<p>现在，我希望这里面的内容在这个section内部溢出滚动，但section必须保持相同的高度。您可以通过运行此emmet看到问题：</p>
<article><h1>文章标题</h1><p>一些内容</p></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>CSS 样式:
* {
margin: 0;
box-sizing: border-box; /* 确保盒模型计算准确 */
}
header {
text-align: center;
background-color: red;
height: 100px; /* 固定头部高度 */
}
main {
height: calc(100vh - 100px); /* main区域高度 = 视口高度 - 头部高度 */
display: flex; /* 启用Flex布局，使侧边栏和内容区并排 */
border: 2px solid red;
}
aside {
padding: 0 2em;
background-color: lightgray; /* 侧边栏样式 */
}
section {
flex: 1; /* 内容区域占据main的剩余空间 */
overflow-y: scroll; /* 关键：内容溢出时，section内部滚动 */
background-color: lightblue; /* 内容区域背景色 */
}
article {
border-top: 2px solid black;
padding-bottom: 40vh; /* 增加内容高度以演示滚动 */
}注意事项
- 此方案中，section 承担了主要滚动区域的角色。如果 section 内部有多个逻辑模块（如 article），它们将一起在 section 内部滚动。
- 这种布局会产生一个独立的滚动条用于 section 区域，而不是浏览器的主滚动条。
- 适用于需要高度控制、内部滚动体验的仪表盘或单页应用。
方案二：固定元素与浏览器原生滚动
此方案更符合传统网页的滚动行为，即头部和侧边栏固定，而主内容区域随浏览器主滚动条滚动。同时，它允许主内容区域内的特定模块（如文章、卡片）拥有自己的固定高度和内部滚动。
核心思路
- 使用 position: fixed; 将 header 和 aside 定位到视口中的固定位置。需要指定 top, left, width, height 等属性，并设置 z-index 确保它们位于内容之上。
- main 区域使用 position: absolute; 定位，并计算其 top, left, width，以避开固定元素占据的空间。min-height 确保其至少占据剩余视口空间，并允许内容溢出时自然扩展。
- main 区域内的子模块（如 article）可以被赋予固定的高度，并设置 overflow-y: auto;，使其内部内容在溢出时独立滚动。
示例代码
HTML 结构:
<!DOCTYPE html>
<html>
<head>
<title>Fixed Elements, Native Scroll</title>
</head>
<body>
<!-- 固定元素 -->
<header>HEADER</header>
<aside class="sidebar-left">左侧边栏</aside>
<aside class="sidebar-right">右侧边栏</aside>
<main>
<p>现在，我希望这里面的内容在这个article内部溢出滚动，但article必须保持相同的高度。您可以通过运行此emmet看到问题：</p>
<article><h1>文章标题 1</h1><p>一些内容</p></article>
<article><h1>文章标题 2</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>文章标题 3</h1><p>一些内容</p></article>
<article><h1>文章标题 4</h1><p>一些内容</p></article>
</main>
</body>
</html>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); /* 宽度 = 100% - 左右侧边栏宽度 */
min-height: calc(100% - 100px); /* 最小高度，允许内容撑开 */
border: 2px solid red;
padding: 1em; /* 增加内边距避免内容紧贴边缘 */
}
article {
height: 350px; /* 关键：每个article固定高度 */
overflow-y: auto; /* 关键：article内部内容溢出时，自身滚动 */
background-color: lightblue;
border-top: 2px solid black;
margin-bottom: 1em; /* 增加article之间的间距 */
padding: 1em;
}注意事项
- 此方案利用了浏览器原生的滚动条，用户体验更自然。
- main 区域的 top 和 left 属性必须精确计算，以避开固定元素的区域。
- main 的 min-height 确保即使内容不多，它也能占据至少 100vh - header_height 的空间，同时允许在内容过多时向下扩展，触发浏览器滚动。
- article 元素（对应原始问题中的 section）拥有固定高度和独立滚动，完美解决了“分区内部滚动”的需求。
总结与选择
两种方案各有优劣，适用于不同的设计目标：
-
方案一（视口约束与主内容区域内部滚动）：
- 优点：对主滚动区域有严格控制，适用于需要特定滚动行为（如单页应用中的自定义滚动条、滚动捕捉效果）的场景。
- 缺点：可能导致页面上出现多个滚动条（一个浏览器主滚动条，一个内部滚动条），用户体验可能不如原生滚动直观。
-
方案二（固定元素与浏览器原生滚动）：
- 优点：更符合用户对网页滚动的直觉，只有一个浏览器主滚动条。固定元素始终可见，主内容区域自然流动，且
