即使父元素的高度设置为“100vh”，子元素也不包含在视口高度中

Question

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

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

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

<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>

在上面的代码中，我将父级的 height 设置为 100vh。这意味着它应该包含在视口的高度中。但是它的子元素正在延伸这个高度。我运行在 codepen.io 里面，看到父级现在不是 height 的视口，但不止于此。我不知道我在这里做错了什么。

Answer 1

唯一的错误是 body 元素的默认边距为 8px，因此高度增加了 16px。

要修复 ie，您只需将页边距设置为 0，因此将其添加到 CSS:

的开头

body { margin:0;}

工作示例：

body { margin:0;}

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

.child1 {
  background: #42A5F5;
  height: 100%;
}

.child2{
  background: #FFEB3B;
  height: 100%;
}

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

<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>

即使父元素的高度设置为“100vh”，子元素也不包含在视口高度中

Child elements are not contained in viewport height even if parent's height is set to be `100vh`

html

css

grid

flexbox