使用CSS网格将页脚放在视线之外

Question

我有一个70像素高的标题，我要填充屏幕其余部分的主要内容，然后是70像素页脚。 我正在尝试找到最简单的隐藏页脚的方法。这与 footer 结合使用-参见下面的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>

  

但是问题是，如果我使用grid-gap: 10px，我必须   在grid-template-rows中进行计算，如果我添加，则会变得混乱   更多部分。

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

Answer 1

您可以从 explicit网格中删除footer（将您的 explicit grid 行定义更改为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)

     

如果您将某物放置在定义的网格之外，或者由于   内容量，需要更多的网格轨迹-然后网格创建   隐式网格中的行和列。这些曲目将自动调整大小   默认情况下，导致其大小基于以下内容：   在他们里面。

     

您还可以为隐式网格中创建的轨道定义设置大小   具有grid-auto-rows和grid-auto-columns属性。

---

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