如何在CSS中基于动态高度设置元素比例，实现页面无滚动适配？

页面包含导航栏和4个两行两列布局的图表，需求是在不同屏幕高度下，所有图表完整适配页面，不出现滚动条。

用户现有代码：

<div className="container">
  <div className="graph">
   <Chart /> //graph 1 
   <Chart /> //graph 2
</div>
 <div className="graph">
   <Chart /> //graph 3 
   <Chart /> //graph 4
</div>
</div>

曾尝试的方案：给container设置90vh高度，给<Chart />组件设置固定高度，但未达成预期效果。

核心思路 #

1. 精确计算图表容器的可用高度：用视口高度减去导航栏实际高度，避免整体内容超出视口。
2. 使用Grid布局实现两行两列的自适应分配，让每个图表容器平均占据空间。
3. 让图表容器和图表本身都填充满对应空间，避免固定高度导致的适配问题。

具体实现代码 #

CSS 样式

/* 清除页面默认边距，避免溢出 */
body {
  margin: 0;
  padding: 0;
}

/* 导航栏样式（根据实际情况调整高度） */
.navbar {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* 图表容器 */
.container {
  /* 减去导航栏高度，确保整体不超出视口 */
  height: calc(100vh - 60px);
  /* 两行两列布局，各占1份空间 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* 图表间的间距，可按需调整 */
  gap: 12px;
  /* 内边距避免图表贴边，box-sizing确保内边距不增加容器总高度 */
  padding: 12px;
  box-sizing: border-box;
}

/* 单个图表容器 */
.graph {
  height: 100%;
}

/* 图表组件（如果是第三方库，可能需要!important强制覆盖默认高度） */
.Chart {
  height: 100% !important;
}

JSX 结构调整

<div className="navbar">导航栏内容</div>
<div className="container">
  <div className="graph">
    <Chart /> {/* 图表1 */}
  </div>
  <div className="graph">
    <Chart /> {/* 图表2 */}
  </div>
  <div className="graph">
    <Chart /> {/* 图表3 */}
  </div>
  <div className="graph">
    <Chart /> {/* 图表4 */}
  </div>
</div>

关键说明 #

• 之前用90vh未考虑导航栏高度，可能导致整体内容高度超过100vh出现滚动条，calc(100vh - 导航栏高度)能精确控制可用空间。
• Grid布局的1fr会自动把剩余空间平均分配给每个单元格，适配不同屏幕高度。
• 确保图表组件本身设置height:100%，如果是ECharts、Highcharts这类第三方库，需检查是否支持高度继承，必要时用!important覆盖默认样式。

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