CSS如何设置容器占满浏览器窗口全高？height:100%不生效如何解决？

百分比高度生效的前提是父元素有明确的高度定义，你只给.container和.body设了height:100%，但它们的所有上层元素（包括html、body、React根容器、外层的<Page>组件根元素）都没有设置高度，所以100%的高度会回退到由内容高度决定，就出现了被压缩到300px的情况。

直接用视口高度单位vh，不需要依赖父元素高度继承，修改CSS如下：

/* 先加全局重置，避免默认边距撑开高度 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  background: url('https://media-cldnry.s-nbcnews.com/image/upload/newscms/2020_51/3436724/201218-cyberpunk-al-1020.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* 让背景图铺满整个容器 */
  background-position: center; /* 背景图居中显示 */
  min-height: 100vh; /* 最小高度等于浏览器视口完整高度 */
  height: auto; /* 内容超过视口高度时自动撑开 */
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #404040;
  width: 600px;
  margin: 0 auto; /* 让表单容器水平居中 */
  min-height: 100vh; /* 同步和外层容器等高 */
}

这个方案不需要修改任何其他外层组件的样式，适配性最强。

如果必须用百分比单位，需要将所有上层容器的高度都设为100%：

1. 先添加全局样式：

html, body, #root { /* #root是React项目默认的根容器ID，如有修改请替换为你的根容器ID */
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 给外层的<Page>组件的根元素添加height: 100%的样式，确保所有父级层级的高度都被正确定义。
3. 保留你原来的.container和.body的height、min-height设置即可生效。

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