html - 带填充的 CSS 网格溢出容器

Question

我正在尝试创建一个宽度为 100%(正文)的页脚。在页脚的左侧，我想要一个 Logo 。在页脚的右侧，我想要一些文字。所以我决定尝试使用 CSS 网格。

这几乎正是我想要的:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 30% 70%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo"></div>
  <div class="footerGridQuestions"></div>
</div>

但是，我想在网格左侧添加一些填充，比如说 10%，这样 Logo 就不会太靠近左边缘。因此，我尝试 10-25-65 拆分，而不是 30-70 拆分。然而，网格最终会溢出。这是为什么？

问题的证明:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

我意识到只需添加另一个 10% 的网格项而不是填充即可解决我的问题，但我很好奇为什么填充的工作方式不同。

Answer 1

首先，不要使用百分比单位，而是使用 fr 单位。这些单位表示剩余空间，并在呈现固定长度(例如填充)后被考虑在内。

所以不是这个:

grid-template-columns: 30% 70%

试试这个:

grid-template-columns: 3fr 7fr

更多详情:

• The difference between percentage and fr units in CSS Grid Layout

---

其次，移除容器上的width: 100%。

.footer {
  background-color: #2D1975;
  width: 100%; <---------- remove
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

当您将 .footer 设置为 display: grid 时，它会变成(或保持) block 级元素。这样的元素会自动占据父元素的整个宽度。

但是，如果您将 width: 100% 添加到 block 级元素，它会在计算中添加任何填充、边距和边框，从而导致溢出。所以只需将其删除即可。

---

第三，如果将 padding-left 添加到 Logo 本身，而不是添加到网格容器或网格项，则可以避免整个问题。