父元素设100vh但子元素超出视口高度的技术咨询

嘿，我帮你找到了问题的根源，这其实是前端布局里很常见的两个小坑，咱们一步步来解决：

1. 浏览器默认的body外边距搞的鬼：绝大多数浏览器都会给body默认加上margin: 8px左右的样式，你的.parent是块级元素，这个默认外边距会让它在视口的顶部和底部都多出一点空间，导致整个页面的总高度变成100vh + 16px（上下各8px），自然就超出视口了。

2. Grid布局的冗余高度设置：你给子元素加了height:100%，但其实Grid布局默认的align-items: stretch属性已经会让子元素自动填满父元素的高度，这个设置完全没必要，不过它不是导致高度溢出的核心原因。

具体修复步骤 #

第一步：清除默认的全局样式 #

最简单的办法是在CSS开头加一段全局重置代码，一次性清除所有元素的默认内外边距，同时设置盒模型避免布局偏差：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果你不想重置所有元素，至少要把body的默认margin去掉：

body {
  margin: 0;
}

第二步：优化子元素的高度设置（可选） #

既然Grid已经会自动让子元素拉伸填充高度，咱们可以把子元素的height:100%删掉，让代码更简洁：

.child1 { background: #42A5F5; } 
.child2{ background: #FFEB3B; }

完整修复后的代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent{ 
  background: #64B5F6; 
  height: 100vh; 
  display: grid; 
  grid-template-columns: 40% 60%; 
} 

.child1 { background: #42A5F5; } 
.child2{ background: #FFEB3B; } 

.img1 { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 

.img2 { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

HTML

<div class='parent'> 
  <div class='child1'> 
    <img class='img1' src="https://images.unsplash.com/photo-1597594879431-8aecf7c2dd49?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image"> 
  </div> 
  <div class='child2'> 
    <img class='img2' src="https://images.unsplash.com/photo-1598505628759-67b9346af31c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="man image"> 
  </div> 
</div>

额外小提示 #

• box-sizing: border-box这个属性特别实用，它能让元素的内边距和边框不会额外增加元素的总宽度或高度，避免很多布局计算上的偏差。
• 以后再遇到类似“元素莫名超出预期高度”的问题，先检查浏览器默认样式（比如body、html的margin/padding），这绝对是前端新手最容易踩的坑之一。

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