I am working with a simple layout design:
+----------+
| Header |
+----------+
| |
| Content |
| |
+----------+
| Footer |
+----------+
My goal is to ensure that the footer is positioned:
- at the bottom of the viewport when there is empty space below the content,
- under the content, accessible by scrolling, if the content fills up the viewport space or more.
In simpler terms, I want the content to fill up all the space left over by the header and footer, and extend further if needed, pushing the footer out of the viewport.
Additionally, I want to avoid hard-coding the height of the footer as its content size may vary based on the browser or device.
The default behavior works well when the content is long, however, it positions the footer too high on the page when the content is short.
On the other hand, if I try to place the footer at the absolute bottom, it works better with shorter content but overlaps with the content when the content is too long.
I have explored some "naive" (hard-coded footer height) solutions without using Bootstrap: Absolute Positioning with Footer not working
Even these solutions didn't work well because Bootstrap was causing interference.
By further analyzing my sample, I discovered that the issue was caused by the relative position assigned to all container-fluid elements.
Removing this position setting resulted in the expected behavior for the "naive" case with hard-coded footer height.
So, how can I achieve the desired behavior with Bootstrap:
- at least in the naive approach,
- without specifying the footer height manually (may require some JavaScript)?
/*.footer {
position: absolute;
bottom: 0px;
}*/<body>
<div class="container-fluid">
<div class="row">
<div class="col-xl-12">
Header<br/>
Header<br/>
Header<br/>
</div>
</div>
<div class="row">
<div class="col-xl-12">
Content<br/>
Content<br/>
...
Content<br/>
</div>
</div>
<div class="row footer">
<div class="col-xl-12">
Footer<br/>
Footer<br/>
Footer<br/>
</div>
</div>
</div>
</body>