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％，这样徽标就不会靠近左边缘。因此，不是30-70分裂，我尝试10-25-65分裂。然而，网格最终溢出。那是为什么？

证明问题：

.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

这是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 2

首先，使用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 3

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

的内容（实际创建空间）

当您向页脚留下10％的填充内容时，内容会从左边框移位10％。但是你有25％和65％的网格比率，总计达到90％。剩下的10％是背景。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

Answer 5

你在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 6

你有没有试过删除这一行

    width: 100%;

从CSS代码？

试着看看结果。

带填充的CSS网格溢出容器

6 个答案: