Question

使用CSS Grid，我需要一个带有固定标题，导航和页脚的全屏，只有文章是flex。

With margin = 0px it is OK

但是如果保证金= 10px则不行since footer is not fixed below

如何使用固定页眉，导航和页脚（仅限文章为flex）保持全屏，并且页边距为= 20px？

Answer 1

检查MDN article box-sizing。默认情况下，box-sizing的{{1}}设置为body - 这意味着：

宽度和高度属性包含内容，但不包括填充，边框或边距。

在您的情况下，

content-box正文的属性为height，但是当您设置100vh时，它需要margin，而更多 100vh + 2 * 20px。

要防止出现这种情况，您必须考虑100vh - 在正文上设置margin：

＆＃13;

height: calc(100vh - 40px);

＆＃13;

body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav article article"
    "nav footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: calc(100vh - 40px);
  border-radius: 10px;
  padding: 0px;
  margin: 20px;
  font-size: 150%;
}

header,
footer,
article,
nav,
div {
  background-color: #444;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  font-size: 150%;
}

#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
  background-color: #379;
}

#mainNav {
  grid-area: nav;
}

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 975px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "article"
      "article"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}

＆＃13;

Answer 2

所以你的问题基本上就是当你添加边距或填充时身体占据更多空间的原因？

常识是，如果您向边距或填充等元素添加内容，则该元素会占用更多空间以默认增加。

请看一下CSS box模型。在这里阅读 - ＆gt; box model或此处box model

重要提示：使用CSS设置元素的宽度和高度属性时，只需设置内容区域的宽度和高度。要计算元素的完整大小，还必须添加填充，边框和边距。

要将height:100vh与margin:20px放在一起，您需要使用100vh从calc()中减去该边距。所以代码是body { height: calc(100vh - 40px)}。您减去40px因为margin:20px等于margin-top:20px;margin-right:20px;margin-bottom:20px;margin-left:20px所以您有top-bottom : 20+20 = 40px页边距。

对于填充，您可以使用box-sizing:border-box - ＆gt;更多box-sizing

border-box宽度和高度属性（以及最小/最大属性）包括内容，填充和边框

body {
margin:20px;
height:calc(100vh - 40px);
padding:20px;
box-sizing:border-box;
background:red;
}

带有边距/填充的css网格全屏

2 个答案: