I am looking for a way to do a conditional footer such that:

1. If the page content is shorter than the height of the viewport, the footer is a .fixed-bottom
2. Otherwise, it's part of the page itself and you'll reach it when you scroll all the way down to it.

This is similar to a sticky-top, and while Bootstrap does have a sticky footer example it doesn't actually stick to the bottom when I try it.

CodePudding user response：

Suppose if I have this layout:

<div id="main-container">
    <header></header>
    <main></main>
    <footer></footer>
</div>

What I usually do is have the main-container as a flex box (column-wise) and then main have a flex-fill class. What this does is puts the header on top, and footer at the bottom always, dince the main will fill all the space it has. This will also satisfy the condition you've.

Also works if you don't have a header, all you need to do is have the main content div take the entire space using flex-fill.

CodePudding user response：

Thanks to the answer above, I got the inspiration to look at the flex box techniques and was able to figure it out by

%body.d-flex.flex-column.min-vh-100

And on the footer itself

%footer.mt-auto

And now it's working as expected.