使用100vh设置网格视图时出现垂直溢出问题求助

第一步：清除全局默认边距 #

浏览器默认给body和部分元素加了边距，这会直接导致整体内容超出100vh范围，先重置全局样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden; /* 强制隐藏全局滚动条，确保内容严格在视口内 */
}

box-sizing: border-box能让元素的内边距、边框都算在自身宽高内，避免额外撑开尺寸。

第二步：调整Grid的空间分配逻辑 #

别给Grid的行/列设置固定高度，改用fr单位让空间自动适配视口：

.grid-container {
  height: 100vh;
  display: grid;
  /* 按需求分配比例，比如图片区占1份、表单区占1份，或者图片区自适应内容、表单区占剩余空间 */
  grid-template-rows: auto 1fr; 
  /* 如果是左右两列布局，就用grid-template-columns: 1fr 1fr; */
}

这种方式会让子区域根据视口高度自动伸缩，不会硬撑出超出100vh的高度。

第三步：约束图片的显示尺寸 #

图片是溢出高发区，必须让它严格在容器内适配，不能超出：

.image-section {
  overflow: hidden; /* 隐藏超出容器的图片部分 */
}
.image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器，裁剪多余区域 */
  /* 若想完整显示图片，可换成object-fit: contain; 但会留空，不会溢出 */
}

绝对不要给图片设固定高度，让它继承容器高度，再用object-fit控制显示逻辑。

第四步：处理表单区域的内容溢出 #

如果表单内容过多，缩小屏幕时可能撑高容器，可给表单区加内部滚动（不影响全局）：

.form-section {
  overflow-y: auto; /* 表单内容超出时仅内部滚动，全局无滚动条 */
  padding: 1rem; /* 加内边距避免内容贴边，box-sizing已包含该尺寸 */
}

要是不想内部滚动，就得优化表单布局——比如缩小字体、调整控件间距，确保内容能放进分配的空间里。

快速排查技巧 #

• 用浏览器F12开发者工具选中grid-container，查看它的实际高度是否为100vh，有没有被子元素撑开。
• 检查子元素的margin，比如图片的上下外边距是否超出了容器范围。
• 若用min-height:100vh，必须配合body { overflow:hidden; }，否则内容溢出时仍会出现滚动条。

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