{"id":2300,"date":"2015-11-08T06:37:24","date_gmt":"2015-11-08T14:37:24","guid":{"rendered":"http:\/\/www.wellgolly.com\/?p=2300"},"modified":"2016-03-10T17:25:26","modified_gmt":"2016-03-11T01:25:26","slug":"put-footer-at-the-bottom-of-the-page","status":"publish","type":"post","link":"https:\/\/www.wellgolly.com\/?p=2300","title":{"rendered":"Put footer at the bottom of the page"},"content":{"rendered":"<p>This only works if the page content is not bigger than the window.<br \/>\nTry it yourself or check it out at <a href=\"http:\/\/wellgolly.com\/Examples\/FixedFooter.html\">FixedFooter<\/a>.<\/p>\n<p><pre><code class=\"preserve-code-formatting\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n\n&lt;head&gt;\n&nbsp;&nbsp;&lt;title&gt;Fixed Footer Example&lt;\/title&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot; \/&gt;\n\n&nbsp;&nbsp;&lt;style type=&quot;text\/css&quot;&gt;\n&nbsp;&nbsp;html, body, #container {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: auto;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n&nbsp;&nbsp;}\n\n&nbsp;&nbsp;#footer {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:0;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100%;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: auto;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:60px;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div id=&quot;container&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;This is the main content&lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;If it is bigger than the window, then the footer will play over it.&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;The footer can be inside or outside of the container.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;div id=&quot;footer&quot;&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;This is the footer content.&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This only works if the page content is not bigger than the window. Try it yourself or check it out at FixedFooter. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &nbsp;&nbsp;&lt;title&gt;Fixed Footer Example&lt;\/title&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot; \/&gt; &nbsp;&nbsp;&lt;style type=&quot;text\/css&quot;&gt; &nbsp;&nbsp;html, body, #container { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: auto; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center; &nbsp;&nbsp;} &nbsp;&nbsp;#footer { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: auto; &hellip; <a href=\"https:\/\/www.wellgolly.com\/?p=2300\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Put footer at the bottom of the page<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-2300","post","type-post","status-publish","format-standard","hentry","category-html-and-css"],"_links":{"self":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2300"}],"version-history":[{"count":0,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=\/wp\/v2\/posts\/2300\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wellgolly.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}