我有一个页面，我想在其中显示一个表和一个位于页面底部的面板。我查了一些答案，但还没有一个是完美的。不确定问题出在哪里。因此，我当前代码的方式是将要放置在页面底部的元素的父元素设置为relative，并将子内容设置为底部为零的固定位置。通过这种方式，它将div设置在页面底部，但问题是，当垂直调整页面的大小时，底部的div会隐藏其他页面内容。如何解决这个问题我正在使用旧的引导程序3.7。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive">
<table id="" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="position:relative;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="position:fixed; bottom:0;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>底部有额外填充的片段：
.pt-4 {
padding-top: 16px;
}
.pb-20 {
padding-bottom: 80px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid pt-4 pb-20">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="table-responsive">
<table id="" class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="position:relative;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="position:fixed; bottom:0;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>