引导程序预滚动 DIV 的固定高度

Question

在我的应用程序中，我必须为数据库记录显示 bootsatarp 网格。由于记录数足够大，无需整页滚动即可查看，因此我用引导程序预滚动 div 包装了我的表格，它为我提供了滚动表格的功能。然而，DIV 大小始终是浏览器窗口的一半。我几乎尝试了所有堆栈溢出的帖子和建议，但它们对我不起作用。我还尝试通过支持 java 脚本来修复此问题，但它也失败了。

这是我的 HTML 代码

<div class="col-md-9">
<div  class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed"  id="sometable">
                    <thead>
                  <tr>
                    <th>EMP_No</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Type</th>
                    <th>#Days</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Half day</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <?php  //php code for print the table
                 ?>
</div>
</div>

我用 PHP 代码的结果填充了上表。我不知道如何将此 DIV 的高度设置为浏览器窗口的固定值或完整值。下面是使用的 CSS

 <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 1px;
}
thead th {
    text-align: center;
    background-color: #3498db;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

这是结果网页

原文由 rafalefighter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 bootstrap css 文件中为 .pre-scrollable div 设置了一个 max-height 属性。

 .pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

那可能是您问题的根源。

原文由 Vcasso 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为简单起见，您可以使用 css 视口尺寸。是这样的：

 <div class="pre-scrollable" style="max-height: 75vh">
     <table>...</table>
</div>

其中“75vh”是可见高度的 75%。

原文由 Maxim Prasolov 发布，翻译遵循 CC BY-SA 3.0 许可协议