HTML容器div在其子项下占据了额外的空间？

Question

我有一个容器div，其中包含this website

中的项目网格

但是我注意到父div在底部占据了一些额外的空间，如下面的图像波纹所示。

我的子div上没有任何填充或边距，当我在chrome inspector中检查它的大小时，似乎是正确的。

这里是重现该问题的最小代码笔：codpen link，请注意.container-team容器div和下一个div之间的间距。

如何消除此间距？

Answer 1

从container-team的样式中删除比例转换。这就是导致您的页面出现问题的原因。

Answer 2

快速而肮脏的解决方案是在父容器中添加负边距：

.container-team {  
  max-width: 1170px;
  width: 100%;
  margin: 0px auto;
  margin-bottom: -25%;
  padding: 0 0px;
  box-sizing: border-box;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

https://codepen.io/anon/pen/eXJNBw?editors=1100

但是，看到这个额外的空白的原因是因为您将所有内容缩放了0.8。每当执行css transform: scale时，它都会在进行缩放之前创建布局，这意味着元素的位置相对于1.0缩放时的位置。之所以将其绑定到顶部，是因为使用transform-origin: top center将css设置为该方式，将转换后的元素放在顶部和中央。如果您删除了它，它只会将其全部缩小0.8，在顶部和底部增加空白。

负边距修复很好，但是如果您想要一个更强大的解决方案，则应该考虑将每个用户元素缩小并使用margin-left和margin-right而不是整个缩放。

Answer 3

您必须以与元素.container-team对应的样式添加高度值。 以下样式可以解决问题：

height: -webkit-fill-available;

添加其他任何高度值也可以

height: 100px;

Answer 4

我将您的最后一个div移到了上一个div内。

现在，您应该能够添加所需的间距，而无需所有额外的间距：https://codepen.io/anon/pen/BbjyYW?editors=1100

<div style="background-color: #999;"> next item </div>

如果您不希望所有间距都一样，但又不希望最后一个div位于container-team div内，则将container-team div和“ next item” div嵌套在另一个div中，像这样：

<div> <div class="container-team"> Container team content </div> <div style="background-color: #999;"> next item </div> </div>