html - 使用 CSS 网格将页脚置于 View 之外

Question

我有一个 70 像素高的页眉，我想填充屏幕其余部分的主要内容，然后是一个 70 像素的页脚。 我正在尝试找到隐藏页脚的最简单方法。这适用于 View 中的页脚 - 请参阅jsfiddle和下面的片段:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px auto [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

---

但我想将它推到屏幕外，以便在需要时使用按钮显示。我尝试使用 grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px这确实给了我想要的效果 jsfiddle和下面的片段:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: 100vh;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px calc(100vh - 70px) [footer] 70px;
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  grid-row: 3;
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

But the problem with that is, If I use grid-gap: 10px I have to calculate that in grid-template-rows which then gets messy if I add more sections.

例如，3 个部分将有 2 个间隙，如果我将间隙设置为 10px，则总间隙为 20px，加上页脚的 70px 意味着总共 90px。如果有人接管了代码，他们需要知道他们需要手动将其添加到 grid-template-row 行，我知道这会被遗漏。任何人都有我想念的简单想法？

Answer 1

您可以删除您的 footer从显式网格(将您的显式网格行定义更改为grid-template-rows: [header] 70px 1fr并从grid-row: 3中删除footer)并设置网格容器 高度为 calc(100vh + 70px)并使用 footer 设置隐式网格行(这是您的 grid-auto-rows: 70px 高度) .

请参阅下面的 vanilla CSS 演示:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  height: calc(100vh + 70px); /* adding footer height */
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>

但是当新的部分被添加到网格时，您将不得不再次进行那些困惑的计算。一个更动态的选项是保留一个网格项(下面演示中的零宽度 adjuster 元素)仅用于设置布局高度:

• 放在第一列，跨越前两行

• 有 height: 100vh用 z-index: -1 设置并推到后面这样就不会影响布局。

请看下面的演示:

* {
  margin: 0;
  padding: 0;
}

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

body {
  display: grid;
  margin: 0px;
  grid-gap: 10px;
  grid-template-columns: [side__nav] 250px [main] 1fr;
  grid-template-rows: [header] 70px 1fr; /* removed footer from here */
  grid-auto-rows: 70px; /* implicit grid height - footer height */
}

.header {
  grid-column: main;
  grid-row: 1;
  background: pink;
}

.side__nav {
  grid-column: side__nav;
  grid-row: 1/span 3;
  background: red;
}

.content {
  grid-column: main;
  grid-row: 2;
  background: green;
}

.footer {
  grid-column: main;
  /*grid-row: 3;*/
  background: purple;
  opacity: 0.5;
}

.a {
  grid-column: col/span 2;
  grid-row: row;
}

.b {
  grid-column: col 3/span 2;
  grid-row: row;
}

.c {
  grid-column: col/span 2;
  grid-row: row 2;
}

.d {
  grid-column: col 3/span 2;
  grid-row: row 2;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.e {
  grid-column: 1/3;
  grid-row: 1;
}

.f {
  grid-column: 1;
  grid-row: 2;
}

.g {
  grid-column: 2;
  grid-row: 2;
}

.adjuster { /* grid items spanning two rows with explicit height set */
  width: 0;
  position: relative;
  z-index: -1;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
}

section { /* new sections added*/
  background: cadetblue;
}

<header class="header">header</header>
<nav class="side__nav">side__nav</nav>
<content class="content">content</content>
<footer class="footer">footer</footer>
<!-- height adjuster for viewport -->
<span class="adjuster"></span>
<!-- other page sections below -->
<section></section>
<section></section>

来自 MDN 的关于隐式和显式网格的摘录:

The implicit and explicit grid (MDN)

If you place something outside of the defined grid—or due to the amount of content, more grid tracks are needed—then the grid creates rows and columns in the implicit grid. These tracks will be auto-sized by default, resulting in their size being based on the content that is inside them.

You can also define a set size for tracks created in the implicit grid with the grid-auto-rows and grid-auto-columns properties.

---

您可以在此处阅读有关显式和隐式网格的更多信息:CSS Grid unwanted column added automatically