How to push a footer to the bottom of page when content is short or missing?

Your issue can be easily fixed by using flexbox. Just wrap your .container and your .footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom.

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}
<div class="flex-wrapper">
  <div class="container">The content</div>
  <div class="footer">The Footer</div>
</div>

Related Posts:

  1. How to make a vertical line in HTML
  2. How to make the overflow CSS property work with hidden as value
  3. Linking to a pdf file with html
  4. Change TD border color with HTML or CSS
  5. 100% DIV width is not really 100%
  6. How to place two divs next to each other?
  7. How to make div background color transparent in CSS
  8. Open source social media icons to download and use on website? [closed]
  9. CSS calc width and height values
  10. CSS Circle with border
  11. Center image using text-align center?
  12. CSS Background Opacity [duplicate]
  13. How can I center text (horizontally and vertically) inside a div block?
  14. Center image horizontally within a div
  15. Remove CSS class from element with JavaScript (no jQuery) [duplicate]
  16. Prevent line-break of span element
  17. Is there any way to change input type=”date” format?
  18. What is the meaning of == $0 that is shown in inspect element of google chrome for the selected element [duplicate]
  19. How to align iframe always in the center
  20. Expected RBRACE, but the bracket is there?
  21. How to make an image center (vertically & horizontally) inside a bigger div
  22. How to center text with Markdown?
  23. Disable Scrolling on Body
  24. Darken CSS background image?
  25. Responsive image map
  26. How to wrap text around an image using HTML/CSS
  27. How to make a whole ‘div’ clickable in html and css without JavaScript?
  28. How (and why) to use display: table-cell (CSS)
  29. Vertical Text Direction
  30. How to darken a CSS background image?
  31. How can I create a marquee effect?
  32. Can I add background color only for padding?
  33. right align an image using CSS HTML
  34. CSS Background Image Not Displaying
  35. Changing the width of Bootstrap popover
  36. Why “Inline-block” doesn’t work properly in this CSS?
  37. html not linking css
  38. Removing border from table cells
  39. bootstrap 3 navbar collapse button not working
  40. how to center an inline div using css?
  41. How to get CSS to select ID that begins with a string (not in Javascript)?
  42. Setting table row height
  43. How do I disable the resizable property of a textarea?
  44. How can I insert vertical blank space into an html document?
  45. Is it possible to set the equivalent of a src attribute of an img tag in CSS?
  46. How to display a gif fullscreen for a webpage background?
  47. Padding a table row
  48. Is there a CSS selector for elements containing certain text?
  49. How to align 3 divs (left/center/right) inside another div?
  50. How to make a

Leave a Comment