如何让react原生网页全高？

html,
body {
  height: 100%; /* 设置html和body元素的高度为100% */
  margin: 0;
  padding: 0;
}

#root {
  display: flex; /* 将根元素设置为flex容器 */
  flex-direction: column; /* 设置flex主轴方向为垂直方向 */
  min-height: 100vh; /* 设置根元素的最小高度为视口高度 */
}

.main-content {
  flex: 1; /* 设置主要内容区域的flex属性为1，使其占据剩余空间 */
}

html,
body {
  height: 100%; /* 设置html和body元素的高度为100% */
  margin: 0;
  padding: 0;
}

#root {
  display: grid; /* 将根元素设置为grid容器 */
  grid-template-rows: 1fr auto; /* 设置grid的行布局，其中1fr表示剩余空间的比例，auto表示自适应高度 */
  min-height: 100vh; /* 设置根元素的最小高度为视口高度 */
}

.main-content {
  grid-row: 1 / -1; /* 设置主要内容区域跨越所有行 */
}