I have implemented a bootstrap footer with position:absolute to ensure it remains at the bottom of my single-page website at all times.
The issue arises when I resize the screen width and reach around 980px, the footer height increases, obstructing most of the page content (specifically a login panel). This is frustrating as ideally, it should resize downwards to allow continuous visibility of the login panel.
So far, I have experimented with position:relative but this results in the footer lingering in the middle of the page, which is not the desired effect.
<body style="height:100%;min-height:100%">
<footer class="page-footer font-small indigo" style="position:absolute;right: 0;bottom: 0;left: 0;">
<div class="container text-center text-md-left">
<div class="row" id="footer">
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Explore</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">About us</h5>
<ul class="list-unstyled">
<li>
<a href="#!">About us</a>
</li>
<li>
<a href="#!">Trust and safety</a>
</li>
<li>
<a href="#!">Help and support</a>
</li>
<li>
<a href="#!">Contact</a>
</li>
</ul>
</div>
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">How does it work?</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!"></a>
</li>
<li>
<a href="#!"></a>
</li>
</ul>
</div>
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!">Link 1</a>
</li>
<li>
<a href="#!">Link 2</a>
</li>
<li>
<a href="#!">Link 3</a>
</li>
<li>
<a href="#!">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>