• Given that we have a min height of the main container to make our page long enough.
• Here is our HTML and CSS/SCSS code.

HTML

<div class="main-container">
  <div class="main-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem tempore unde ullam,
    voluptatem accusamus perspiciatis laboriosam sapiente numquam dignissimos eaque cumque
    dicta quod sed placeat adipisci ea iusto voluptates aspernatur veniam quidem, harum minus quam.
    Facilis quidem voluptates cumque pariatur saepe ipsum qui molestiae debitis illo quia praesentium
    incidunt numquam quod fuga repudiandae voluptatem, dicta ullam doloremque maxime soluta eos illum!
    Non obcaecati culpa atque eos soluta incidunt alias cupiditate laboriosam voluptatum,
    dolores officiis iste, aliquam ea, ad natus eaque? Nesciunt asperiores beatae dicta minima placeat deleniti facilis,
    quas quisquam id ab labore dignissimos dolorem, accusamus corporis laborum necessitatibus aliquam.
  </div>
  <div class="footer">
  </div>
</div>

CSS/SCSS

.main-container {
  min-height: 30vh; /* 30% of a viewport's height */
  display: flex;
  flex-direction: column;
}
.main-content {
  padding: 10px;
}
.footer {
  height: 100px;
}

• If a content is long enough, it is okay.

• If your a content is short, a footer will be moved up and leave some empty space at the bottom.
• This is not what we want.

• We can fix a floating footer to always at the bottom by setting margin-top to auto
• Add margin-top: auto to footer class.

.footer{
  height: 100px;
  margin-top: auto;
}

• After fixing, here is what it looks like.

• The main key is: if we apply auto margin to a flex item, that item will automatically extend its specified margin to occupy the extra space in the flex container, depending on the direction in which the auto-margin is applied.
• In our case, the margin value is set to all available space (column direction) in the flex container and then a footer is pushed to the bottom.