My current setup is as follows:
<div class="container px-0">
<nav class="...">
</nav>
<div class="row px-3">
...content
</div>
<div class="row footer-spacer">
an empty div of height 50px to deal with footer.
</div>
</div>
<footer class="container page-footer font-small fixed-bottom">
Footer
</footer>
On most pages, the content is longer than the page length; however, on a few pages, the content is very short, resulting in a large negative space between the content and the footer.
I attempted to add a container div with vh-100, but it added excessive white space at the end on pages with longer content.
I also experimented with the flex-fluid/flex-grow approach from here, but the result remained unchanged as if no flex-fluid was applied. I am using Bootstrap v4.3
My goal is to fill the remaining negative space only if the content height is less than the viewport height. However, if the content exceeds the viewport height, the filler div should have a height of 0.
I prefer not to use container-fluid because I like the margins that container provides in centering the column of text on the page.