CSS 带有填充的网格溢出容器

Question

我正在尝试创建宽度为 100%（正文）的页脚。在页脚的左侧，我想要一个徽标。在页脚的右侧，我想要一些文字。所以我决定尝试使用CSS grid.

这几乎正是我想要的：

.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 元素进行填充时，它会相对于其边框

置换内容（实际上创建 space）

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

要解决此问题，请使用 25% 和 75% 的比率或总计为 100% 的任何比率。填充仍然会导致总宽度溢出 10%。所以把footer的宽度设置成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 单位。这些单位代表剩余的 space 并在固定长度（例如填充）渲染后被考虑在内。

所以不是这个：

grid-template-columns: 30% 70%

试试这个：

grid-template-columns: 3fr 7fr

更多详情：

其次，删除容器上的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-网格/填充问题，将下一个代码添加到 css:

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

Answer 7

None 个答案帮助我解决了问题。如果我添加 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>

CSS 带有填充的网格溢出容器

CSS grid with padding overflows container

html

css

overflow

css-grid