'The page div placed at the bottom with with fixed position hides other contents on smaller screen size?
I have a page where I would like to display a table and a panel that stays at the bottom of the page. I have looked up some answers but none of them works perfectly yet. not sure what is the issue. So the way my current code is to set the parent of the element to be placed at the bottom of the page to relative and set the child content to fixed position with bottom zero. this way it sets the div at the bottom of the page but the problem is that when sizing the page vertically on a smaller size the bottom div hides other page content. How to fix this I am using old bootstrap 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>Solution 1:[1]
A snippet with extra padding at the bottom:
.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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | muka.gergely |