React应用布局需求：顶部App Bar占父容器20%高度，底部占80%

下面提供两种简单可靠的实现方案，都是基于CSS的标准布局方式，适配React应用场景：

方法一：CSS Flexbox（推荐） #

Flexbox是实现这种比例布局最直观的方式，通过父容器的垂直flex布局，分配子元素的高度占比。

代码实现 #

JSX部分

import React from 'react';
import './Layout.css';

const Layout = () => {
  return (
    <div className="layout-container">
      {/* 顶部App Bar，固定占20%高度 */}
      <div className="app-bar">
        <p>App bar</p>
      </div>
      {/* 内容区自动填充剩余高度 */}
      <div className="content-area">
        <div>Content A</div>
        <div>Content B</div>
        <div>Content C</div>
      </div>
    </div>
  );
};

export default Layout;

CSS部分（Layout.css）

/* 让父容器占满目标高度，这里以浏览器视口高度为例 */
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* 如果父容器是某个容器的子元素，把100vh换成100%，同时确保上级容器设置了有效高度 */
}

.app-bar {
  flex: 0 0 20%; /* 固定占20%高度，不随内容伸缩 */
  background-color: #2196f3; /* 可选：添加背景色区分区域 */
  display: flex;
  align-items: center; /* 垂直居中App Bar内容 */
  padding: 0 16px;
}

.content-area {
  flex: 1; /* 自动填充剩余所有高度 */
  overflow-y: auto; /* 内容超出时自动显示滚动条，避免撑破布局 */
  background-color: #f5f5f5; /* 可选：添加背景色区分区域 */
  padding: 16px;
}

方法二：CSS Grid #

Grid布局也能快速实现这种比例分配，通过定义行高比例完成布局。

代码实现 #

JSX部分和方法一完全相同，只需要修改CSS：

.layout-container {
  display: grid;
  grid-template-rows: 20% 1fr; /* 第一行占20%，第二行占剩余全部 */
  height: 100vh;
}

.app-bar {
  background-color: #2196f3;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.content-area {
  overflow-y: auto;
  background-color: #f5f5f5;
  padding: 16px;
}

关键注意点 #

• 若父容器不是占满视口，将height: 100vh替换为height: 100%，但必须保证父容器的上级元素设置了明确的高度值，否则百分比高度不生效。
• 给内容区添加overflow-y: auto是为了处理内容过长的情况，避免布局被撑开变形。

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