html - 如何考虑 CSS 网格设置中的动态行？

Question

我的主页仪表板的一般结构为 div元素相互堆叠(每个元素都在屏幕范围内并提供不同类型的信息)。

我通过 CSS Grid 管理 block 的高度:整个应用程序是 min-height: 100vh;行是 auto除了一个是 1fr .效果很好。

我现在面临其中一条线动态存在或不存在的情况。这是因为它实际上是一个 Vue 组件，用 v-if 条件显示。 .问题是 CSS 部分不知道它的存在并且 grid-template-rows是固定的。这导致错误的行是 auto和 1fr当它被切换时。

如何解决？

我能想到的一种方法是以 CSS 将其视为一行的方式强制组件的存在。现在我将此元素视为 <!----> == $0在 Dev Tools 关闭时。

另一种方法是“描述”列模板而不是固定列表。类似于“尽可能使用 auto，然后是 1fr 和一个 auto ”

---

下面的两个代码片段模拟了我的问题。

第一种是所有元素都可见的情况

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
}

div {
  border-style: dashed;
  border-width: 1px;
}

<div id="app">
  <div>this line is always visible</div>
  <div>this one is toggled - here it is visible</div>
  <div id="footer">this is the footer</div>
</div>

下面是相同的代码，但第二行被切换了(此处注释掉，在实际代码中通过 v-if 禁用)。看看它如何影响不再位于底部的页脚，因为 CSS 没有改变(= 没有适应消失的行)

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
}

div {
  border-style: dashed;
  border-width: 1px;
}

<div id="app">
  <div>this line is always visible</div>
  <!-- <div>this one is toggled - here it is not visible anymore </div> -->
  <div id="footer">this is the footer</div>
</div>

Answer 1

一个想法是明确定义页脚的行始终使用最后一行:

#app {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto auto 1fr;
}

#footer {
  align-self: end;
  grid-row:-1;
}

div {
  border-style: dashed;
  border-width: 1px;
}

<div id="app">
  <div>this line is always visible</div>
  <div>this one is toggled - here it is visible</div>
  <div id="footer">this is the footer</div>
</div>

<div id="app">
  <div>this line is always visible</div>
  <!--<div>this one is toggled - here it is visible</div>-->
  <div id="footer">this is the footer</div>
</div>