{"id":304,"date":"2011-07-14T00:56:55","date_gmt":"2011-07-14T00:56:55","guid":{"rendered":"http:\/\/tech.avant.net\/q\/?p=304"},"modified":"2012-12-25T22:39:44","modified_gmt":"2012-12-25T22:39:44","slug":"footer-at-the-bottom","status":"publish","type":"post","link":"https:\/\/tech.avant.net\/q\/footer-at-the-bottom\/","title":{"rendered":"html footer at the bottom"},"content":{"rendered":"<p>I want the footer of an html page to never be higher than the bottom of the browser window. In other words, if there&#8217;s not enough content to fill a webpage, I want the footer to be at the bottom of the page (rather than hovering underneath the content).<\/p>\n<p>See this <a href=\"\/sandbox\/html_footer_eg1.html\">example<\/a>.<\/p>\n<p>Assuming a standard html div layout, e.g.,<\/p>\n<pre class=\"sh_html\">\r\n&lt;div id=&quot;page&quot;&gt;\r\n\r\n  &lt;div id=&quot;header&quot;&gt;...&lt;\/div&gt;\r\n  &lt;div id=&quot;body&quot;&gt;...&lt;\/div&gt;\r\n  &lt;div id=&quot;footer&quot;&gt;...&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>There is cross-browser approach to keep the footer at the bottom of the page. I have seen various approaches to this issue and all of them rely on a similar trick: First, enforce a min-height, and second, use margin\/padding to position a fixed-height footer.<\/p>\n<p>The cross-browser minimum height trick looks like this:<\/p>\n<pre class=\"sh_css\">\r\nhtml, body {\r\n    height: 100%;\r\n}\r\n#page {\r\n    min-height: 100%;\r\n    height: auto !important;\r\n    height: 100%;\r\n}\r\n<\/pre>\n<p>Non-IE (and newer IE) browsers will understand the <em>min-height<\/em> style, older versions require the <em>height: auto !important; height: 100%;<\/em> styles.<\/p>\n<p>Next, we position a fixed-height footer. You can do this through a negative-margin that overlaps the body, or use <em>position: absolute;<\/em>. I prefer the latter approach as it looks cleaner.  Either way, remember to pad the bottom of your body content so that the footer will never overlap actual content, e.g.,<\/p>\n<pre class=\"sh_css\">\r\n#body {\r\n    padding-bottom: 3em;\r\n}\r\n#footer {\r\n    position: absolute;\r\n    bottom: 0;\r\n    height: 3em;\r\n}\r\n<\/pre>\n<p>The footer height must be fixed, and the <em>padding-bottom<\/em> should be greater than or equal to the fixed footer height.<\/p>\n<p>Putting it all together, please see this <a href=\"\/sandbox\/html_footer_eg2.html\">modified example<\/a> which uses the following sticky footer css:<\/p>\n<pre class=\"sh_css\">\r\n\/* sticky footer *\/\r\nhtml, body {\r\n    height: 100%;\r\n}\r\n#page {\r\n    min-height: 100%;\r\n    height: auto !important;\r\n    height: 100%;\r\n    position: relative;\r\n}\r\n#body {\r\n    padding-bottom: 3em;\r\n}\r\n#footer {\r\n    position: absolute;\r\n    bottom: 0;\r\n    height: 3em;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I want the footer of an html page to never be higher than the bottom of the browser window. In other words, if there&#8217;s not enough content to fill a webpage, I want the footer to be at the bottom of the page (rather than hovering underneath the content). See this example. Assuming a standard [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12,11],"tags":[],"_links":{"self":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/304"}],"collection":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":10,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/posts\/304\/revisions\/720"}],"wp:attachment":[{"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech.avant.net\/q\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}