CSS网格全屏余量/填充

Question

使用CSS格，我需要一个完整的屏幕固定头，导航和页脚，只有文章是弯曲。

With margin = 0px it is OK

但随着利润率= 10px的它的也不行since footer is not fixed below

我怎样才能保持全屏，固定头，导航和页脚（只文章是柔性）也与保证金= 20px的？

Answer 1

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

的宽度和高度属性包括内容，但不包括填充，边框或余量。

在箱体height属性是100vh，但是当你设置margin - 它需要100vh + 2 * 20px，比100vh多。

为了防止这种情况，你必须采取margin考虑 - 设置height: calc(100vh - 40px);的身体：

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

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<footer id="pageFooter">Footer</footer>

Answer 2

所以你的问题基本上就是为什么身体占据更多的空间，当你增加保证金或填充？

这是常识，如果你添加了一些类似保证金或填充的元素，该元素占据更多的空间，在默认情况下增加。

请看看CSS盒模型。读到这里 - > 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 = 40pxmargin。

对于填充你可以使用box-sizing:border-box - >详细这里box-sizing

边界框的宽度和高度属性（和最小/最大特性）包括内容，填充和边界

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