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 将再向下延伸 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

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

设置它们在元素上的高度，并将它们的容器高度设置为auto。

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