html - 在 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
• 如果 footer3 折叠，则 footer2 取代 footer3，footer1 取代 footer2 和 mainAreaExpandMePlease 将再向下拉伸(stretch) 28px

谢谢!

fiddle :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>

Answer 1

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

设置元素的高度，并将其容器高度设置为自动。

.my-grid {
  display: grid;
  height: 100vh;
  grid-template-rows: auto auto 1fr auto auto auto;
  grid-template-areas:  "header1" 
                        "header2"
                        "mainAreaExpandMePlease"
                        "footer1"
                        "footer2"
                        "footer3";
}

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

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

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

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

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

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

body {
  margin: 0;
  padding: 0;
}

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