{"id":869,"date":"2012-09-21T15:51:29","date_gmt":"2012-09-22T01:51:29","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=869"},"modified":"2020-05-03T16:32:06","modified_gmt":"2020-05-04T02:32:06","slug":"css-height-100","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/css-height-100\/","title":{"rendered":"CSS Height 100%"},"content":{"rendered":"
I have a fixed footer and some content with a background. \u00a0The designer wants the content background to expand all the way to the bottom whether there’s a lot of content or no content at all. \u00a0This seemed relatively easy, just put height:100% in the content and all its parent containers. \u00a0That didn’t work, no changes whatsoever. \u00a0Another trial and failure was to use a absolute positioned element with height 100%. \u00a0Again that didn’t work. \u00a0That just made the element 100% of the current window size. \u00a0So if the content expanded more than the window height, the background would not show.<\/p>\n
There are many, many solutions, hacks, tips, and tricks to making a footer stick to the bottom of page. \u00a0The basic elements to making a footer stick to the bottom of a page are:<\/p>\n
The best solution with an example I have found on the web is: \u00a0<\/p>\n
http:\/\/ryanfait.com\/resources\/footer-stick-to-bottom-of-page\/<\/p>\n
Instead of using the push element you could just use a padding-bottom on the wrapper div though.<\/p>\n
Another older solution, but still uses the same principles is:<\/p>\n