Javascript 引导预滚动DIV的固定高度

在我的应用程序中，我必须为数据库记录显示bootstarp网格。由于记录计数的数量足够大，无需整页滚动即可查看，因此我使用bootstrap pre scrollable 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>

EMP_No
名称
任命
部门
类型
#日子
开始日期
结束日期
半天
地位

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

桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
td，th{
边框：1px实心#dddddd；
文本对齐：居中；
填充：1px；
}
thead th{
文本对齐：居中；
背景色：#3498db；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}

将有助于。。。正如链接页面上的示例所示，您需要设置div not表格的高度

<style type="text/css">
        body, html {
            height: 100%;
            overflow: hidden;
        }

        .navbar-inner {
            height: 40px;
        }

        .scrollable {
            height: 100%;
            overflow: auto;
        }

        .max-height {
            height: 100%;
        }

        .no-overflow {
            overflow: hidden;
        }

        .pad40-top {
            padding-top: 40px;
        }
</style>

正文，html{
身高：100%；
溢出：隐藏；
}
.导航栏内部{
高度：40px；
}
.可滚动{
身高：100%；
溢出：自动；
}
.最大高度{
身高：100%；
}
1.没有溢出{
溢出：隐藏；
}
.pad40顶部{
填充顶部：40px；
}

在引导css文件中为.pre-scrollable div设置了最大高度属性

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

---

这可能是问题的根源。

为了简单起见，您可以使用css视口维度。大概是这样的：

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

...

---

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

谢谢您的回答。