如何使一个 div 始终位于视图的底部并根据底部 div 调整顶部 div 的大小？

Question

我对 Web 开发还很陌生，我正在做一些需要两个 div 来始终占据 100% 视口的东西。我有一个 div A，它是一个交互式图像，应该尽可能大并且应该占据屏幕的顶部。然后是包含 1 个或 2 个按钮的 div B，具体取决于在交互式 div A 上执行的操作。 Div B 位于视图的底部。有没有一种干净的方法可以使 A 的大小取决于 div B 动态占用的大小？就像视口的“剩余部分”应该是 div A。我在下面放了一张我想要实现的图像。第二张图显示了如果在 div A 中执行某些操作会发生什么 - 为简单起见，我们可以说如果调用了某个方法potato()，我们希望 div B 现在包含两个按钮。我试过用以下方法解决：        position: fixed;        bottom: 0;并且 Div B 看起来 90% 正确，但它不会调整 Div A 的大小，我也不希望 Div B 以这种方式“覆盖”任何东西。我只是希望它与 Div A 处于同一级别并共享空间以获得 100% 的视口。任何帮助将不胜感激！如果可能，我更喜欢使用纯 CSS。我正在做一些团队工作，无法在库或项目的新依赖项方面添加太多内容。

Answer 1

带上我的 2 美分，您还可以利用display: table|table-row|table-cell来创建此布局（请参阅有关 display 属性的MDN 文档以了解更多信息）。

使用这些属性时的技巧，除非display: flex，是告诉“动作”单元格测量 0.1px，这将迫使单元格尽可能地最小。但是，它不会破坏其内部内容，允许根据内部内容进行动态调整。

由于单元格默认共享空间，因此这种布局可以完成工作，因为“Div A”正在使用剩余的可用空间。

检查这个JSFiddle或使用下面的代码片段来玩它。我注释了您可以调整的属性。

body {

  margin: 0px;

}

.app {

  width: 100vw;

  height: 100vh;

  display: table;

}

.main,

.actions {

  display: table-row;

}

.main > div,

.actions > div {

  display: table-cell;

  vertical-align: middle;

  text-align: center;

  border-width: 10px; /* tweak this */

  border-style: solid; /* tweak this */

}

.main > div {

  border-color: purple; /* tweak this */

  background-color: violet; /* tweak this */

}

.actions > div {

  padding: 20px; /* tweak this */

  border-color: blue; /* tweak this */

  background-color: lightblue; /* tweak this */

  height: 0.1px;

}

.button {

  width: 200px; /* tweak this */

  padding: 10px; /* tweak this */

}

<div class="app">

  <main class="main">

    <div>

      Div A

    </div>

  </main>

  <footer class="actions">

    <div>

      <div>

        Div B - some text and 2 buttons

      </div>

      <div>

        <button class="button">

          Button 1

        </button>

      </div>

      <div>

        <button class="button">

          Button 2

        </button>

      </div>

    </div>

  </footer>

</div>