如何调整CSS grid网格大小使其适配浏览器页面且无滚动条

核心原因 #

1. 默认content-box盒模式下，你设置的元素高度仅包含内容区域，边框、内边距、外边距都会额外叠加到总高度上，即使你设置了5%+95%的高度组合，叠加后也会超出视口
2. 未给body设置明确的视口高度限制和溢出隐藏规则，内容撑开后就会出现滚动条
3. 网格的垂直百分比间隙、元素的上下外边距都会额外占用垂直空间，进一步加剧高度溢出

修改步骤 #

1. 全局添加box-sizing: border-box规则，让所有元素的边框、内边距都包含在你设置的宽高范围内
2. 给body设置height: 100vh和overflow: hidden，同时采用flex垂直布局自动分配子元素高度，避免手动计算高度占比的误差
3. 标题设置flex-shrink: 0防止被挤压，网格设置flex: 1自动占满剩余垂直空间
4. 网格的grid-gap垂直值改为固定值，避免百分比间隙随视口变化超出预期

完整修改后的CSS代码 #

* {
  margin: 0px;
  border: 0px;
  padding: 0px;
  box-sizing: border-box; /* 新增：启用border-box盒模型 */
}

body {
  background: #007acc;
  height: 100vh; /* 新增：固定高度为视口高度 */
  overflow: hidden; /* 新增：超出视口内容隐藏，避免滚动条 */
  display: flex; /* 新增：flex垂直布局 */
  flex-direction: column;
}

.title {
  padding: 1%;
  margin: 1% auto;
  background: #ff9400;
  border: 4px solid black;
  border-radius: 20px;
  text-align: center;
  width: 90%;
  flex-shrink: 0; /* 新增：标题不被挤压 */
}

.grid {
  display: grid;
  grid-template: auto auto auto auto auto / 70% 30%;
  grid-gap: 8px; /* 改：垂直间隙用固定值，避免百分比溢出 */
  width: 85%;
  margin: 1% auto;
  flex: 1; /* 新增：自动占满剩余垂直空间 */
  min-height: 0; /* 新增：修复flex布局下grid内容溢出不裁剪的问题 */
}

.music {
  padding: 1%;
  background: grey;
  grid-area: 1 / 1 / span 1 / span 1;
  font-size: 30px;
}

.chat {
  padding: 1%;
  background: white;
  grid-area: 2 / 1 / span 3 / span 1;
  overflow-y: scroll;
}

.input {
  padding: 1%;
  background: gray;
  grid-area: 5 / 1 / span 1 / span 1;
  font-size: 25px;
}

.chat .name {
  color: red;
  font-weight: bold;
}

.players {
  padding: 1%;
  background: #ffbf00;
  border-radius: 20px;
  grid-area: 1 / 2 / span 3 / span 1;
  font-weight: bold;
}

.share {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  grid-area: 4 / 2 / span 2 / span 1;
  object-fit: cover; /* 新增：图片自适应容器，不变形 */
}

修改后页面会完全贴合视口高度，不会出现滚动条，网格内的chat区域滚动功能也能正常使用，所有元素会随窗口大小自动调整尺寸。

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