带边距/填充的 CSS 网格全屏

Question

使用 CSS 网格，我需要一个带有固定页眉、导航和页脚的全屏，只有文章是 Flex 的。

With margin = 0px it is OK

但是 margin = 10px 就不行了since footer is not fixed below

如何保持全屏固定页眉、导航和页脚（只有文章是弹性的）以及边距 = 20px？

Answer 1

检查MDN 文章中的box-sizing。\n默认box-sizing设置body为content-box\xe2\x80\x93，这意味着：

\n\n

\n

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

\n

\n\n

height在你的情况下， body 的属性是100vh，但是当你设置margin\xe2\x80\x93时100vh + 2 * 20px，它需要 ，这超过了100vh。

\n\n

为了防止这种情况，你必须考虑在 body 上margin设置的 \xe2\x80\x93 ：height: calc(100vh - 40px);

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n