{"id":4623,"date":"2025-04-12T14:03:23","date_gmt":"2025-04-12T13:03:23","guid":{"rendered":"https:\/\/ibex.tech\/wordpress-sites\/?p=4623"},"modified":"2025-09-27T11:54:24","modified_gmt":"2025-09-27T10:54:24","slug":"force-footer-to-always-be-at-the-bottom-of-the-screen","status":"publish","type":"post","link":"https:\/\/ibex.tech\/wordpress-sites\/page-builders\/elementor\/page-design\/force-footer-to-always-be-at-the-bottom-of-the-screen","title":{"rendered":"Force footer to always be at the bottom of the screen"},"content":{"rendered":"\n<p>If page content is short the footer can end up half way up the screen. This CSS ensures its always that the page content is always big enough for the footer to be at the bottom, but avoids it being used in the wp-admin area where it will break the placement of &#8220;Thank you for creating with WordPress&#8221; (causing it to appear half way up the page):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*----- FORCE FOOTER TO ALWAYS BE AT THE BOTTOM -----*\/\n\/* Make the body fill the viewport height and use flexbox *\/\nbody:not(.wp-admin):not(.block-editor-page) {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\/* Make the main content area fill the remaining space *\/\nmain:not(.wp-admin):not(.block-editor-page) &gt; main {\n  flex-grow: 1;\n}\n\/* Position the footer at the bottom *\/\n.elementor-location-footer { \/* Or use the specific class of your footer *\/\n  margin-top: auto; \/* Push the footer to the bottom *\/\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If page content is short the footer can end up half way up the screen. This CSS ensures its always that the page content is always big enough for the footer to be at the bottom, but avoids it being used in the wp-admin area where it will break the placement of &#8220;Thank you for [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[354,372,347],"tags":[],"class_list":["post-4623","post","type-post","status-publish","format-standard","hentry","category-css","category-header-footer","category-page-design"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/comments?post=4623"}],"version-history":[{"count":4,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4623\/revisions"}],"predecessor-version":[{"id":4701,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/posts\/4623\/revisions\/4701"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/media?parent=4623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/categories?post=4623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/wordpress-sites\/wp-json\/wp\/v2\/tags?post=4623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}