如何在Flexbox/CSS中设置固定高度占比的页面布局？

嘿，这个需求其实用Flexbox就能轻松搞定，核心是让你的容器撑满整个浏览器视口高度，然后给子元素分配固定的高度比例就行。我给你拆解一下具体步骤：

关键要点 #

• 首先得让你的wrapper容器占满整个视口高度，不然百分比高度就没法生效
• 把wrapper设置为垂直方向的Flex布局（flex-direction: column）
• 给top和bottom元素设置固定的高度占比，同时禁止它们被拉伸或收缩

完整代码示例 #

HTML部分 #

<div class="wrapper">
  <div class="top">Top 区域（70% 高度）</div>
  <div class="bottom">Bottom 区域（30% 高度）</div>
</div>

CSS部分 #

/* 先让根元素和body占满视口高度，去掉默认边距避免滚动条 */
html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%; /* 继承body高度，占满整个视口 */
}

.top {
  flex: 0 0 70%; /* flex-grow:0 不拉伸，flex-shrink:0 不收缩，flex-basis:70% 基础高度70% */
  background: #f0f0f0; /* 加背景色方便区分区域 */
}

.bottom {
  flex: 0 0 30%; /* 同理，固定占30%高度 */
  background: #e0e0e0;
}

补充小技巧 #

如果你的内容可能超过区域高度，可以给top或bottom加上overflow: auto，这样内容超出时会自动出现滚动条，不会破坏整体布局。另外也可以用min-height: 100vh替代height: 100%，vh单位直接对应视口高度，写法更简洁：

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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