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

Fixed height for bootstrap pre-scrollable DIV

本文关键字:滚动 DIV 高度      更新时间:2023-09-26

在我的应用程序中,我必须显示数据库记录的bootsatarp网格。由于记录计数的数量足够大,可以在没有整页滚动的情况下查看,我用bootstrap预滚动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>

这是结果网页

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

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

那可能就是你问题的根源。

为简单起见,您可以使用css视口尺寸。像这样:

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

Twitter bootstrap -固定布局与可滚动边栏将帮助…正如链接页面上的示例所示,您需要设置div而不是表的高度。

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