Question

我有一个围绕桌子的<div>，如下所示：

<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

您可以在案例中的父元素body上使用Flexbox，并将高度设置为100vh，然后在overflow-y: auto上设置container。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果你想在没有flex的情况下这样做。你可以这样做

.buttons {
  height: 40px;
}
.container {
  max-height: calc(100vh - 40px);
  overflow: scroll;
}
body {
  margin: 0;
}

<div class="container">
    <table>
      <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><tr><td>Row</td></tr>
    </table>
</div>
<div class="buttons">
   Here I have two buttons
</div>

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

2 个答案: