我正在尝试使引导站点中的表扩展到当前页面的整个高度，但是无论我做什么，它都只能扩展到页面的一半左右，而不能扩展到其他页面。
不确定如何完成此操作。因此，如果您需要更多信息，请在下面将表格发布给我。
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style rel="stylesheet" src="./css/style.css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script rel="text/JavaScript">
var h = window.innerHeight;
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var height = h / rows.length;
rows[i].style.height = String(height) + 'px';
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered ">
<thead>
<tr style="height:100%">
<th>Category One</th>
<th>Category Two</th>
<th>Category Three</th>
<th>Category Four</th>
<th>Category Five</th>
</tr>
</thead>
<tbody >
<tr>
<td><a href="#">100</a></td>
<td><a href="#">100</a></td>
<td><a href="#">100</a></td>
<td><a href="#">100</a></td>
<td><a href="#">100</a></td>
</tr>
<tr>
<td><a href="#">200</a></td>
<td><a href="#">200</a></td>
<td><a href="#">200</a></td>
<td><a href="#">200</a></td>
<td><a href="#">200</a></td>
</tr>
<tr>
<td><a href="#">300</a></td>
<td><a href="#">300</a></td>
<td><a href="#">300</a></td>
<td><a href="#">300</a></td>
<td><a href="#">300</a></td>
</tr>
<tr>
<td><a href="#">400</a></td>
<td><a href="#">400</a></td>
<td><a href="#">400</a></td>
<td><a href="#">400</a></td>
<td><a href="#">400</a></td>
</tr>
<tr>
<td><a href="#">500</a></td>
<td><a href="#">500</a></td>
<td><a href="#">500</a></td>
<td><a href="#">500</a></td>
<td><a href="#">500</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>最佳答案
根据您的描述，我想您希望表行扩展到基于行数的窗口高度的百分比。这是使用JavaScript / jQuery的一种相当简单的方法：
var h = window.innerHeight;
var rows = $('tr');
for (var i = 0; i < rows.length; i++) {
var height = h / rows.length;
$(rows[i]).css('height', String(height) + 'px');
}
Here是一个jsfiddle，可以显示它的运行情况。高度并不完美，但这是一个不错的起点。这是你想要的？
编辑：
代码是否在控制台中引发任何错误？一种可能性是可能不包括jQuery。如果是这样，这是一个纯JavaScript解决方案：
var h = window.innerHeight;
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var height = h / rows.length;
rows[i].style.height = String(height) + 'px';
}