如何在不滚动整个页面的情况下将在中创建一个div（可以使剩余的屏幕高度）滚动？
我知道如何通过像这样包装它来使它在div中可滚动
<div style="overflow: auto; height: 300px;">
<table>...</table>
</div>
但是如何让div的高度使用所有剩余的屏幕高度？
编辑：到目前为止，这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-12">
<div class="panel panel-default">
<!-- Header -->
<div class="panel-heading">Panel Heading<button class="pull-right" onclick="myFunction();">
<span class="glyphicon glyphicon-filter"></span>
</button>
</div>
<div class="panel-body row" id="filter" style="display: none; padding-top: 0;">
<div class="col-md-6">
<div class="col-sm-6 column" style="height: auto; margin-top: 1em">
<!-- filter selector -->
</div>
</div>
</div>
<!-- Table -->
<div class="panel-body" style="overflow: auto; height: 300px;">
<table class="table">
...
</table>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById('filter');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
答案 0 :(得分：1)
通过概述，您可以执行以下操作
<div style="
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: n%;
border-left: 1px solid #000;
">
<table>...</table>
</div>
我将其留在right上，然后使用border-left，这样您就可以看到您需要一个合理的width
编辑：编辑html
您使用position设置父标记relative属性。
您使用position: absolute;用于div代码
答案 1 :(得分：1)
使用 vh 代替％： [100vh]垂直高度
我设置宽度 90％，您可以更改它。
表始终为中心，因为
div.parent为margin: 0 auto
.parent {
background-color: #ccc;
width: 90%;
height: 100vh;
overflow: auto;
margin: 0 auto
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="parent">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
答案 2 :(得分：1)
使用viewport percentages但它不会影响旧的ie。
height: 100vh;