CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer a negative margin-top:

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}

Related Posts:

  1. force footer on bottom on pages with little content
  2. Flushing footer to bottom of the page, twitter bootstrap
  3. footer disappear on some pages frequently
  4. Load CSS in footer, like your can with JS?
  5. With over a page of content the footer remains where the bottom of the screen was at top scroll
  6. WordPress footer always at the bottom of the screen-page
  7. Need help removing block of white space between footer widgets and footer [closed]
  8. 100% Width Footer – Custom Child Theme
  9. Footer in middle of page in different browers [closed]
  10. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  11. CSS opacity only to background color, not the text on it?
  12. How do I center floated elements?
  13. Make div scrollable
  14. limitations of using @Html.EditorForModel
  15. How do I center an h1 in the body
  16. How to make a sticky footer in react?
  17. Can you set a border opacity in CSS?
  18. Any way to limit border length?
  19. Why “Inline-block” doesn’t work properly in this CSS?
  20. How to fade an image with CSS without opacity?
  21. CSS transition fade in
  22. Is it possible to define constants in CSS?
  23. Responsive media query not working in Google Chrome
  24. Contain an image within a div?
  25. Failed to decode downloaded font
  26. Center HTML Input Text Field Placeholder
  27. How to make fixed header table inside scrollable div?
  28. CSS fill remaining width
  29. TinyMCE: adding CSS to format dropdown
  30. Is there a quick way to remove inline css from all posts?
  31. How to remove CSS file in the header using WordPress functions?
  32. Get list of registered or enqued styles? looking for filters or actions
  33. wp_get_archives() – Get CSS selector for current month
  34. Do I only need to import style.css for a child theme?
  35. Disable child theme css on certain pages
  36. How to load a css file in one page only?
  37. How to add custom fonts in WordPress site
  38. Handling URLs in WordPress application
  39. Extending content width with twentyfourteen theme
  40. How to change DASH-ICON color with CSS?
  41. Override load-styles.php with admin screen css
  42. CSS file not registering through add_action
  43. Custom Admin CSS styles to style media uploader?
  44. getting url in wp_enqueue_style
  45. Gutenberg Additional CSS Class without modifying theme?
  46. Eliminate render-blocking JavaScript and CSS in above-the-fold content
  47. Unable to load CSS file (HTTP 403)
  48. Dynamic sidebar nav with current page highlighting
  49. how to setup content on a static frontpage with css and xhtml
  50. wp_enqueue_style – CSS Not loading – ERR_TOO_MANY_REDIRECTS [closed]
  51. Help with child theme enqueuing additional css files
  52. Why does my caroussel gallery do this in responsive? [CSS] [closed]
  53. Website CSS not loading [closed]
  54. WordPress Unite Theme: Footer isn’t sticking [closed]
  55. Custom styles dropdown in TinyMCE editor – not working with headings
  56. Correct Way To Make Changes To A WordPress Theme
  57. Move Sidebar from Above Content To Below When Responsive [closed]
  58. How to deal with logo color on dark mode?
  59. Header background image just stopped working
  60. HTML email sent with wp_mail shows plain text
  61. Add second background-image on hover
  62. CSS getting injected into index from somewhere after theme/custom CSS is loaded, overriding all of my CSS [closed]
  63. How do I change the style of just a part of the tagline?
  64. Having a hard time linking my css and JS files on a Boostrap to WP conversion
  65. Reduce font size [closed]
  66. Using css class selectors on a specifc page [closed]
  67. How can I force the WordPress visual editor to preserve the line breaks after paragraphs?
  68. WordPress Rest Api access the header and extract stylesheets URL
  69. How to create CSS Counters for Comments (depth 5)?
  70. Override All CSS with Custom CSS on a Page by Page Basis
  71. padding not working
  72. Hide Some Fields of Post Submit box
  73. Navbar bg to overflow to section below (updated)
  74. Add top parent page id to body class
  75. New Styles Not Rendering On Mobile Phone and Tablet
  76. Set different css stylesheet for specific pages [duplicate]
  77. Desktop is class List and Mobile is class Grid
  78. Include ElementorPro css into WordPress custom page
  79. Customizing the CSS for the post/page editor?
  80. My Child Theme CSS Isn’t Working
  81. current menu item hover not working?
  82. how to load basic wordpress css
  83. How to prevent a style sheet to affect a header.php or footer.php?
  84. Add class when more page is visited
  85. How do I make a child theme’s style.css load after plugin css?
  86. WordPress – Portfolio – Change number of items in a row
  87. Floated element floats into post content in IE, Safari, and Chrome
  88. How can I pass a variable from PHP to LESS?
  89. Large Unwanted Space at the Bottom of Blog Posts [closed]
  90. Managing large CSS files [closed]
  91. How would I use a media query to make my entire theme responsive or fluid? [closed]
  92. Clear white line off page [closed]
  93. Strange symbols on page [closed]
  94. background changed after WordPress update
  95. How to make this splash page responsive
  96. Menu is not styled properly and footer as well [closed]
  97. How do I add JS and CSS to WP (Flatsome)
  98. Remove / Disable default custom.css?ver=1.0.0
  99. How to remove class=”wp-block-heading” from Heading tags?
  100. Website is not showing updated CSS

Leave a Comment