html - 如何让DIV内容长到一定程度？

Question

我有一个 <div>它环绕着一张 table ，像这样:

<div class="container">
    <table>
       rows...
    </table>
</div>
<div class="buttons">
   Here I have two buttons
</div>

在表格下方我有两个按钮。我希望在添加新行时扩展表格并移动按钮。这行得通。

我想要的是，一旦按钮到达窗口的末端，滚动条就应该出现在表格上，这样无论窗口多小，按钮都始终可见。

这必须在没有 Javascript 的情况下完成，我被困在 CSS 部分。

这是我的 CSS:

.container {
     width: 100%;
     height: 100%
     overflow-x: auto;
     overflow-y: auto;
}

有什么我可以添加到表中以使其工作的吗？当我缩小窗口时，我可以让它显示垂直滚动条 - 这很好 - 但我找不到水平滚动条的解决方案。

总而言之，当屏幕变小或表格变大时，我想要水平滚动条，以至于带有按钮的 div 将被抛出窗口。

有什么想法吗？

Answer 1

您可以在父元素上使用 Flexbox，在您的情况下，它的 body 并将高度设置为 100vh，然后还设置 overflow-y: auto在 容器 上。

如果您还想要水平滚动条，那么您只需在 td DEMO 上添加 white-space: nowrap

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.container {
  overflow-y: auto;
}

<div class="container">
    <table>
      <tbody>
        <tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr><tr><td>row</td></tr>
      </tbody>
    </table>
</div>
<div class="buttons">
   Here I have two buttons
</div>