如何使一个 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 {&nbsp; margin: 0px;}.app {&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; display: table;}.main,.actions {&nbsp; display: table-row;}.main > div,.actions > div {&nbsp; display: table-cell;&nbsp; vertical-align: middle;&nbsp; text-align: center;&nbsp; border-width: 10px; /* tweak this */&nbsp; border-style: solid; /* tweak this */}.main > div {&nbsp; border-color: purple; /* tweak this */&nbsp; background-color: violet; /* tweak this */}.actions > div {&nbsp; padding: 20px; /* tweak this */&nbsp; border-color: blue; /* tweak this */&nbsp; background-color: lightblue; /* tweak this */&nbsp; height: 0.1px;}.button {&nbsp; width: 200px; /* tweak this */&nbsp; padding: 10px; /* tweak this */}<div class="app">&nbsp; <main class="main">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; Div A&nbsp; &nbsp; </div>&nbsp; </main>&nbsp; <footer class="actions">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; Div B - some text and 2 buttons&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button class="button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Button 1&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button class="button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Button 2&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </footer></div>