Question

我正在尝试让我的引导站点中的表扩展到当前页面的完整高度，但是我所做的只是扩展到大约一半的页面而不是更进一步。

不确定如何完成此操作。所以如果您需要更多信息，请在下面发布我的表格。

＆＃13;

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

＆＃13;

Answer 1

根据您的描述，我猜您希望表行根据行数扩展到窗口高度的百分比。使用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';
}

使引导程序中的表扩展到页面的完整高度

1 个答案: