HTML容器div在其子项之后占用了额外的空间？

Question

我有一个容器div，其中包含该网站中的项目网格

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

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

这是重现该问题的最小代码笔： codpen链接 ，请注意.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>