Html 如何制作100%高度的可滚动引导表？

以下是回购协议的链接：

我们有一张桌子：

  <table class="table table-hover movie-list-table">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
  </table>

这成功地使身体达到了全高，但桌子没有自动拉伸以填充该空间

---

谢谢

为什么不使用设置桌子高度

视口百分比长度定义了相对于视口大小的长度 视口，即文档的可见部分

或者，在提供的代码中，没有设置桌子高度-因此，如果您不想使用

vh

，您可能需要添加

高度：100%

（以及

主体

）

同样，如果没有更多的代码，很难提供更定制的解决方案，另一种方法是：

body{
   height:100%;
   position:relative;
}
table{
   position:absolute;
   top:0;
   bottom:0;
}

---

假设该表是

主体的直接子对象

无论是视口还是高度都没有100%的运气，它都不会移动。你能在问题中给出一个独立的示例吗？使用当前代码（不经过GitHub）无法复制块元素的百分比高度，只有当它处于绝对位置时，或者当父元素具有固定的高度时，它才起作用，所以100%只起作用work@SW4尽管不幸的是，这并不能真正反映页面上的内容。有比JSFIDLE更好的解决方案吗？哦，我尝试了top:0-bottom:0方法，它将它拉伸到底部，但完全破坏了它，使它看起来很可怕：（是的，Bootply是专门为BT设计的。即使在包括bootstrap类、JSFIDLE或使用Bootply的情况下，它似乎也能工作，也许您有一个自定义css，但它不适用于……为什么不使用flexbox而不是表呢？

table{
   height:100vh;
}

body{
   height:100%;
   position:relative;
}
table{
   position:absolute;
   top:0;
   bottom:0;
}