固定高度为引导预滚动的DIV
Fixed height for bootstrap pre-scrollable DIV
在我的应用程序中,我必须显示数据库记录的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>
相关文章:
- 如何确定滚动DIV中的可见DOM元素
- 如何获取滚动DIV中的当前活动文本
- 如何在没有滚动条的情况下滚动Div
- 使用纯 Javascript 滚动到可滚动 DIV 中的元素
- 滚动 DIV 元素的特定滚动条
- 鼠标滚轮滚动 DIV 元素
- 使用按钮和鼠标滚动 DIV
- 通过按钮可滚动 Div,没有滚动条
- jQuery滚动DIV是跳跃和定位错误
- 检查元素是否在溢出滚动DIV中完全可见
- 当我们滚动&Div来到Windows中间位置
- 加载数据时动态向下滚动DIV层
- CSS/JS -禁用点击事件,但允许滚动DIV
- 使用Javascript + Input type=range滚动Div
- 从任何地方滚动Div
- HTML / JS水平滚动DIV列表
- jQuery滚动Div高度
- 如何在没有Jquery的情况下将HTML5视频快照附加到滚动DIV
- 在RTL模式下获得可滚动DIV的视图的更好方法
- 暂停自动滚动Div