0

I have the following set up currently:

<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>

While for most pages, the content is longer than the page, for a few, I have very short content of just a few lines. In these cases, I have a giant amount of negative space between content and the footer.

I tried adding a container div with vh-100, but in pages with longer content, it just added a large amount of white space at the end.

I have also tried the flex-fluid/flex-grow approach from here, but the result is the same as if there was no flex-fluid. I am using Bootstrap v4.3

What I would like is to fill the remaining negative space only if the content is less than the height. But if content is longer than the current height of view port, the filler div should have 0 height.

One thing is I do not want container-fluid, since I like the margins container provides in keeping the column of text centered on the page.

asuprem
  • 554
  • 1
  • 5
  • 17

1 Answers1

0

Ok I solved it by adding the min-vh-100 class to the first container.

asuprem
  • 554
  • 1
  • 5
  • 17