如何使可滚动引导表100%高度？

Question

这是回购的链接:

https://github.com/MoviesAroundMe/MoviesAroundMe2/tree/viewTemplate

我们有一张桌子:

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

它占据了页面高度的大约75%,我试图让它延伸到页面的整个高度(从标题向下).

我试过了:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

这成功地使身体全高,但桌子没有自动伸展以填补空间..

谢谢

Answer 1

为什么不使用视口百分比长度设置表高？

table{
   height:100vh;
}

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

或者,从提供的代码中,未设置表格高度 - 因此如果您不想使用,可能需要添加height:100%(以及body)vh.

同样,如果没有看到更多的代码,很难提供更具针对性的解决方案,另一种方法是:

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

假设表是直接的孩子 body