带有填充溢出容器的 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% 的网格项而不是填充即可解决我的问题，但我很好奇为什么填充不能以相同的方式工作。

Answer 1

您在 div 左侧填充 10%，然后将宽度指定为 100%，这导致包括填充在内的总计 %110。

在页脚上方的 div 中填充，并将子 div 的内容分配为 100%

.container {
  padding: 10px;
}

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

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

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

Answer 2

你有没有试过删除这条线

    width: 100%;

来自您的 CSS 代码？

试试看结果。

Answer 3

这是box-sizing。

默认值为content-box，这意味着padding和border值被添加到width中。

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

这是一种常用的方法，from this article：

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>

Answer 4

当您对 HTML 元素进行填充时，它会相对于其边框

替换内容（实际上是创建空间）

当您对页脚进行 10% 的向左填充时，内容会从左边框偏移 10%。但是您有 25% 和 65% 的网格比率，总计为 90%。剩下的 10% 是背景。

要解决此问题，请使用 25% 和 75% 的比率或总计为 100% 的任何比率。填充仍然会导致总宽度溢出 10%。 所以将页脚的宽度设置为 90% 必须解决溢出问题。

.footer {
	background-color: #2D1975;
	width: 90%;
	height: 350px;
	display: grid;
    padding-left:10%;
    	grid-template-columns: 25% 75%;
    }
    
    .footerGridLogo {
    	background-color: red;
    }
    
    .footerGridQuestions {
    	background-color: green;
    }

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

Answer 5

首先，不要使用百分比单位，而是使用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 时，它会变成（或保持）块级元素。这样的元素会自动占据父元素的整个宽度。

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

---

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

Answer 6

我修复了 css-grid / padding 问题，将下一个代码添加到 css：

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

Answer 7

没有一个答案能帮助我解决我的问题。如果我添加padding，我的grid 会搞砸grid-width。唯一对我有帮助的是在grid columns 内围绕grid content 创建一个padding div：

<div class="grid">
  <div class="pad">
    content...
  </div>
</div>

<style lang="scss">
.grid {
    display: grid;
    .pad {
      padding: 1vw;
      content-styles...
    }
</style>