I am currently working on a project that utilizes Bootstrap, and I am facing an issue with positioning the footer. Ideally, I want the footer to stay fixed at the bottom of the screen when there is not enough content to fill the page. However, when the content exceeds the viewport height and scrolling is required, I want the footer to appear just after the content without overlapping it.
Essentially, I am looking for the footer to exhibit standard behavior - fixed at the bottom when the page is short and positioned after the content during scrolling.
At present, my code has the footer fixed at the bottom of the screen, causing it to cover the content near the end.
The current code snippet (PHP markup included) is as follows:
<footer class="container-fluid bg-black mt-5 fixed-bottom">
<div class="row align-items-center">
<div class="col-md-3">
<p class="text-center mb-0">
<a href="#" class="text-decoration-none">
<i class="bi bi-twitter fs-4 p-2 twitter_white"></i>
</a>
</p>
</div>
<div class="col-md-3">
<p class="text-center align-bottom mb-0" style="color: white">
<i class="bi bi-telephone-fill pe-2" style="color: white"></i>
XXX XXX XXX
</p>
</div>
<div class="col-md-3">
<p class="text-center align-bottom mb-0" style="color: white">
<i class="bi bi-envelope pe-2" style="color: white"></i>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceabb6afa3bea2ab8ea9a3afa7a2e0ada1a3">[email protected]</a>
</p>
</div>
<div class="col-md-3 text-center">
<a class="dropdown-toggle white_links" href="#" role="button" data-bs-toggle="dropdown">
<?php if ($_SESSION['lang'] == "es") echo '<span id="es_flag" class="fi fi-es flag_icon_rounded"></span>';
else if ($_SESSION['lang'] == "en") echo '<span id="en_flag" class="fi fi-gb flag_icon_rounded"></span>';
else echo '<span id="cat_flag" class="fi fi-es-ct flag_icon_rounded">'; ?>
</a>
<ul class="dropdown-menu">
<li><a href="/index.php?action=change_language&lang=cat"><span id="cat_flag" class="fi fi-es-ct flag_icon_rounded"></span><label class="label_flags black_links" for="cat_flag">Català</label></a></li>
<li><a href="/index.php?action=change_language&lang=es"><span id="es_flag" class="fi fi-es flag_icon_rounded"></span><label class="label_flags black_links" for="es_flag">Español</label></a></li>
<li><a href="/index.php?action=change_language&lang=en"><span id="en_flag" class="fi fi-gb flag_icon_rounded"></span><label class="label_flags black_links" for="en_flag">English</label></a></li>
</ul>
</div>
</div>
<div class="row align-items-center">
<hr class="m-0 p-0" style="color: white">
<div class="col-md text-center">
<p class="pb-2 pt-2 m-0" style="color: white">
© 2023 <?php echo $GLOBALS['translation']['association']." " ?>
</p>
</div>
</div>
</footer>