Javascript Bootstrap 可预滚动 DIV 的固定高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39147226/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed height for bootstrap pre-scrollable DIV
提问by gripen fighter
In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.
在我的应用程序中，我必须为数据库记录显示 bootsatarp 网格。由于记录数量足够大，无需滚动整页即可查看，因此我用引导程序预滚动 div 包裹了我的表格，它为我提供了滚动表格的功能。然而，DIV 大小一直是浏览器窗口的一半。我尝试了几乎所有堆栈溢出帖子和建议，但它们对我不起作用。我也尝试在 java 脚本的支持下解决这个问题，但它也失败了。
This is my HTML code
这是我的 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>
I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use
我用 PHP 代码的结果填充上表。我不知道如何将此 DIV 的高度设置为浏览器 windows 的固定值或完整值。下面是使用的 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>
回答by Vcasso
There is a max-height property set for the .pre-scrollable div in the bootstrap css file.
bootstrap css 文件中为 .pre-scrollable div 设置了一个 max-height 属性。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
That might be the source of your problem.
这可能是您问题的根源。
回答by Maxim Prasolov
For simplicity you can use css viewport dimensions. Something like this:
为简单起见，您可以使用 css 视口尺寸。像这样的东西：
<div class="pre-scrollable" style="max-height: 75vh">
<table>...</table>
</div>
where "75vh" is 75% of visible height.
其中“75vh”是可见高度的 75%。
回答by CLHardman
Twitter bootstrap - Fixed layout with scrollable sidebarwill help... As the example on linked page will show you need to set the height of the div not table.
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>
