带填充的 CSS 网格溢出容器

Question

我正在尝试创建一个宽度为 100%（正文）的页脚。在页脚的左侧，我想要一个徽标。在页脚的右侧，我想要一些文字。所以我决定尝试使用 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%，这样徽标就不会太靠近左边缘。因此，我尝试 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% 的网格项而不是填充即可解决我的问题，但我很好奇为什么填充的工作方式不同。

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

所以不是这个：

 grid-template-columns: 30% 70%

试试这个：

 grid-template-columns: 3fr 7fr

更多细节：

• CSS Grid Layout中百分比和fr单位的区别

---

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

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

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

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

---

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是 box-sizing 。

The default value is content-box , which means that padding and border values are added to the width .

您可以将其更改为 border-box ，其中宽度包括 padding 和 border 。

这是 本文 中的一种常见方法：

 html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

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

原文由 sol 发布，翻译遵循 CC BY-SA 4.0 许可协议