在CSS网格布局中切换进出的行

Question

我有以下布局，有2个标题和3个页脚：

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3"
        ;
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

主要区域将扩展以填充显示页眉和页脚后留下的空白。

我希望能够打开和关闭页脚（显示/隐藏它们）以使它们崩溃。使用上面的代码，当我们隐藏它时，将留下一个间隙来代替页脚。

我应该怎么做：

• 有一个总是扩大的主要区域
• 隐藏时，可选的页眉和页脚会折叠

例子：

• 如果header1崩溃，那么header2应该取而代之，mainAreaExpandMePlease应该扩展到header2曾经的位置
• 如果header2崩溃，那么mainAreaExpandMePlease应该再扩大27px
• 如果qazxsw poi崩溃，那么qazxsw poi取代qazxsw poi，footer3取代footer2，footer3将延伸另外28px

谢谢！

小提琴：footer1

footer2

mainAreaExpandMePlease

Answer 1

不要在容器级别设置页眉和页脚行的高度。

将它们的高度设置在物品上，并将容器高度设置为https://jsfiddle.net/jg6ho4wu/1/。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.my-grid {
    display: grid;
    grid-template-areas:
        "header1"
        "header2"
        "mainAreaExpandMePlease"
        "footer1"
        "footer2"
        "footer3";
    grid-template-rows: 27px 27px 1fr 28px 28px 28px;
    height: 100%;
}

.header1 {
  grid-area: header1;
  background-color: yellow;
}

.header2 {
  grid-area: header2;
  background-color: magenta;
}

.mainAreaExpandMePlease {
  grid-area: mainAreaExpandMePlease;
  background-color: cyan;
}

.footer1 {
  grid-area: footer1;
  background-color: green;
}

.footer2 {
  grid-area: footer2;
  background-color: red;
}

.footer3 {
  grid-area: footer3;
  background-color: blue;
}

<div class="my-grid">
  <div class="header1"></div>
  <div class="header2"></div>
  <div class="mainAreaExpandMePlease"></div>
  <div class="footer1"></div>
  <div class="footer2" style="display:none"></div>
  <div class="footer3"></div>
</div>