React中CSS百分比高度不生效的原因及解决咨询

云原生阿岚

2026-6-16

问题分析与解决方案

问题出在你的父容器.graph-bar没有设置明确的高度，CSS里的百分比高度是相对于直接父元素的计算高度来计算的，如果父元素高度是默认的auto，浏览器找不到参考基准，就会把子元素的高度解析为0，自然看不到柱状图。

核心原因

CSS 中百分比高度生效的前提是：父元素必须有明确的、非auto的高度（可以是固定像素、视窗单位vh、或者相对于自身父元素的百分比）。如果父元素高度由子元素撑开（默认auto），浏览器无法形成有效参考链，百分比高度会被忽略。

你用像素值能正常显示，是因为像素是绝对单位，不需要依赖父元素；但百分比高度必须有父元素的高度作为计算基准。

解决步骤

打开GraphBar.css，给.graph-bar设置明确高度。如果要做响应式布局，推荐用视窗单位（如vh）或者基于上级容器的百分比：

.graph-bar {
  /* 示例：固定高度或响应式高度二选一 */
  height: 200px; 
  /* 响应式选项：占视窗高度的50% */
  /* height: 50vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.graph-picture {
  background-color: #2196F3; /* 加背景色方便观察 */
  width: 30px; /* 给柱状图设置宽度 */
  margin-top: 8px;
}

.graph-value {
  margin: 0;
  text-align: center;
}