React单页应用中Div无法占满整个视口的问题排查

我正在开发一个React单页应用，目标是让它占据浏览器整个视口（仅针对桌面端），但目前应用组件无法铺满整个页面。

我的App组件代码：

import './App.css';
import { MyCalendar } from "./Components/MyCalendar"

function App() {
  return (
    <div className="grid-container">
      <p className="paragraph">Left-side placeholder</p>
      <MyCalendar className="mycalendar" />
    </div>
  );
}

export default App;

对应的App.css代码：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: 10px;
  height: 100%; width: 100%;
}

.paragraph {
  text-align: center;
}

.mycalendar {
  height: 100%; width: 100%;
  text-align: center;
}

我希望实现的效果是：采用Grid布局，左侧占位文本占25%宽度，右侧日历组件占剩余宽度，且两者在无内容时能延伸至页面底部。

我尝试过设置body为height:100vh; width:100vw;，但没有效果，也查阅过相关问题但未解决：

• 部分答案提到设置body高度，但方法无效；
• 有方案建议用flexbox，但我希望坚持使用grid布局；
• 使用height:100vh的方法也没起作用。

请问我哪里出错了？

解决方案 #

问题出在高度继承链断裂：React应用的根容器（通常是#root）以及html、body元素默认没有设置高度，导致你的.grid-container设置height:100%找不到可继承的高度参考值。

你需要在全局样式里补充以下代码：

html, body, #root {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

保持.grid-container的原有设置即可：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* 刚好对应25%和75%的宽度比例 */
  column-gap: 10px;
  height: 100%;
  width: 100%;
}

核心原因：

1. html和body是页面最顶层元素，设置它们的高度为视口高度，才能让子元素的百分比高度有参考基准；
2. #root是React挂载的根节点，必须让它也占满视口高度，否则你的App组件里的.grid-container无法继承到完整高度；
3. 去掉默认的margin和padding，避免出现不必要的滚动条或留白。

如果想更明确指定宽度比例，也可以把grid-template-columns写成25% 75%，效果和1fr 3fr完全一致。

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