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

为什么不使用viewport percentage lengths设置表格高度？

table{
   height:100vh;
}

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

或者，根据提供的代码，表格高度未设置 - 因此，如果您不想使用{{1}，则可能需要添加height:100%（以及body） }。

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

vh

假设该表是body{ height:100%; position:relative; } table{ position:absolute; top:0; bottom:0; }

的直接子项

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

1 个答案: