In my Bootstrap 4 project, I am utilizing the fixed-bottom class to ensure that the footer remains at the bottom of the page when there is minimal content or the content does not fill up the entire page. Here is the CSS code for the fixed-bottom class in Bootstrap 4:
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
The structure of my footer is as follows:
<footer class=" fixed-bottom container">
<div class="row">
<div class="col-md-5">
Insert content here
</div>
<div class="col-md-7">
Insert content here
</div>
</div>
</footer>
The CSS for the footer includes the following code:
footer {
margin-top: 25px;
}
However, I am facing an issue where if a user clicks on a link that loads content which exceeds the space available on the page, a scrollbar appears and the footer remains fixed at the bottom, obstructing the content. Is there a way to make the footer move below the content using CSS while still retaining the fixed-bottom class on the footer, so that it only becomes visible when the user scrolls to the bottom of the page?
It is important to note that the footer content is wider than the page content, so adjusting the z-index might not be a viable solution.