如何使用CSS将网页划分为3个独立区块？

API 探路者

2026-5-22

实现网页三区块布局的方案

嘿，我来帮你搞定这个网页分块的问题！从你给出的代码来看，你已经搭好了头部的基础，接下来我们用Flexbox（现代CSS布局的首选方案，简洁又好用）来完成剩下的布局，实现头部+左右两个侧边栏的三区块结构。

完整实现代码

首先是完善后的CSS代码：

* { margin: 0; box-sizing: border-box; }
html { height: 100%; background-color: yellow; overflow: hidden; }
body { height: 100%; background-color: #ddd; display: flex; flex-direction: column; }
#header { height: 10%; border-bottom: 3px solid red; display: flex; align-items: center; justify-content: center; }
h2, h3 { text-align: center; }
#wrap { flex: 1; display: flex; }
.pane { flex: 1; border: 2px solid blue; padding: 10px; }
/* 如果需要固定某个面板宽度，比如左侧固定300px，修改如下：
.pane:first-child { flex: 0 0 300px; }
*/

对应的HTML结构示例：

<body>
  <div id="header">
    <h2>头部区块</h2>
  </div>
  <div id="wrap">
    <div class="pane"><h3>左侧区块</h3><p>这里放左侧内容</p></div>
    <div class="pane"><h3>右侧区块</h3><p>这里放右侧内容</p></div>
  </div>
</body>

关键逻辑解释

垂直布局头部与主体：给body设置display: flex; flex-direction: column;，让头部（#header）和下方容器（#wrap）垂直排列。#header固定10%高度，#wrap用flex: 1自动填充页面剩余的90%高度。
横向排列侧边栏：#wrap设置display: flex;，让里面的两个.pane横向分布。flex: 1意味着两个面板平分可用宽度；如果需要固定某一侧的宽度，只需要把对应.pane的样式改成flex: 0 0 300px;（数值按需调整），另一侧保持flex:1自动填充即可。
盒模型优化：box-sizing: border-box;确保内边距和边框不会额外撑开元素的宽高，让布局计算更精准。