{"id":4897,"date":"2025-04-12T15:24:51","date_gmt":"2025-04-12T14:24:51","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=4897"},"modified":"2025-04-12T15:24:52","modified_gmt":"2025-04-12T14:24:52","slug":"force-footer-to-always-be-at-the-bottom-of-the-screen","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/css\/footer\/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:<\/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 {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\/* Make the main content area fill the remaining space *\/\nmain {\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:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[371],"tags":[],"class_list":["post-4897","post","type-post","status-publish","format-standard","hentry","category-footer"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=4897"}],"version-history":[{"count":1,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4897\/revisions"}],"predecessor-version":[{"id":4898,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/4897\/revisions\/4898"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=4897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=4897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=4897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}