Geek Answers Handbook

Footer that should be below all content but not set

I have a website with two footers. One behaves very well as a “fixed” footer that always appears at the bottom of the page. The other footer is larger and should be below the entire content, only appearing when scrolling all the content (if the content is larger than on the page, it should not be visible until you go to the bottom). However, it should be sticky so that if there was very little content, it would not move and leave an uncomfortable white gap.

Now it is displayed in the middle of the page. :( Help?

html, body { height: 100%; width: 100%; } #PageContainer { width: 100%; height: 100%; } header { width: 100%; } #Content { position: relative; background-image:url(Images/Golf%20Ball%20Texture.jpg); background-repeat:repeat; background-size: 150px auto; width: 100%; padding-left: 20px; margin-left: -20px; padding-right: 20px; margin-right: -20px; min-height: 90%; } footer { width: 100%; } #MovingFooter { clear: both; position: absolute; width: 100%; background-color: #FFD600; right: 0; bottom: 0; font-size: .9em; } #StickyFooter { position: fixed; bottom: 0; width: 100%; height: 50px; background-color: #787878; padding-left: 20px; margin-left: -20px; padding-right: 20px; margin-right: -20px; } 
 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="Stylesheet" href="../style.css" type="text/css" /> <link rel="shortcut icon" href="Images/Logo%20Favicon.ico"> <title>Your Personality</title> </head> <div id="PageContainer"> <header> </header> <body> <div id="Content"> </div> <!--id="Content"--> <div id="MovingFooter"> <h2>Company Philosophy</h2> <p>Footer content</p> </div> <!--class="FooterThirds" --> </div> <!-- class="ThirdsContainer" --> </div> <!-- id="MovingFooter" --> <div id="StickyFooter"> <p class="FancyFinePrint">&copy; Copyright 2014 by <a href="http://www.geneticgolf.com">Company Name</a>. All Rights Reserved.</p> <div id="FooterPartners"> <p class="FooterPartnerText">Proud Partners With:</p> </div> <!-- id="FooterPartners" --> </div> <!-- id="StickyFooter" --> </div> <!-- id="PageContainer" --> </body>
+5
source share
1 answer

You are looking for a technique, such as FooterStickAlt , that supports the footer below the content, but also supports the footer at the bottom of the viewport if the content is not so high as to put pressure on it.

Simply put, everything except the footer is wrapped in an contained element that has a min-height: 100% , and then the footer rises with a negative top edge. This particular method requires knowing the height of your sticky footer.

https://css-tricks.com/snippets/css/sticky-footer/ and http://cssstickyfooter.com is the same idea.

+1
source

More articles: