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>