Fix footer to bottom of page

Question

Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.

I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there.

Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a <section id="footer"> div anyway.

I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend.

Live URL - http://www.mangdevelopment.co.uk/nakedradish

(It's a resturant website. Don't worry about the word 'naked').

HTML

<section id="footer">   <div class="container">     <div class="row">       <div class="span1">         <div id="small-logo">           <img src="img/small-logo.png" />         </div>       </div>       <div class="span2">         <div class="footer-list">           <h6>OUR BOXES</h6>           <ul>             <a href="#">               <li>Classic Box</li>             </a>             <a href="#">               <li>Vegetarian Box</li>             </a>             <a href="#">               <li>Family Box</li>             </a>             <a href="#">               <li>Dinner Party Box</li>             </a>             <a href="#">               <li>Gift Box</li>             </a>           </ul>         </div>       </div>       <div class="span2">         <div class="footer-list">           <h6>OUR RECIPES</h6>           <ul>             <a href="#">               <li>Last Weeks Feature</li>             </a>             <a href="#">               <li>Next Weeks Feature</li>             </a>           </ul>         </div>       </div>       <div class="span2">         <div class="footer-list">           <h6>ABOUT US</h6>           <ul>             <a href="#">               <li>The Food</li>             </a>             <a href="#">               <li>How We Sourcex</li>             </a>             <a href="#">               <li>Sustainability</li>             </a>             <li><a href="about.html">About Us</a></li>             <a href="#">               <li>Contact Us</li>             </a>           </ul>         </div>       </div>       <div class="span5">         <div id="twitter">           <img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" />           <div class="tweet-bg">             <div class="tweets">               <p>@chefallanp that's just not on really</p>             </div>             <div id="follow-btn">               <img src="img/follow-us.jpg" />             </div>           </div>         </div>         <div class="checkout-options">           <h6>SECURE CHECKOUT</h6>           <ul>             <li><img src="img/solo-logo.png" /></li>             <li><img src="img/switch-logo.png" /></li>             <li><img src="img/maestro-logo.png" /></li>             <li><img src="img/visa-logo.png" /></li>             <a href="#">               <li><img src="img/facebook-logo.png" /></li>             </a>             <a href="#">               <li><img src="img/twitter-logo-flat.png" /></li>             </a>           </ul>         </div>       </div>     </div>   </div>   <div id="copyright-bar">   <div class="container">     <div class="row">       <div class="copyright-content">         <div class="span4">           <p>The Naked Radish Limited. 2013 All rights reserved.</p>         </div>         <div class="span4 offset4">           <div class="copyright-list">             <ul>               <a href="terms.html">                 <li>Terms &amp; Conditions</li>               </a>               <a href="privacy.html">                 <li> - Privacy Policy</li>               </a>               <a href="#">                 <li> - Cookie Policy</li>               </a>             </ul>           </div>         </div>       </div>     </div>   </div> </section> 

CSS:

#footer {     background-color: #F3F3F3;     padding-top: 10px;     padding-bottom: 0px; } 

Answer 1

For your footer:

#footer {     position: fixed;     height: 50px;     background-color: red;     bottom: 0px;     left: 0px;     right: 0px;     margin-bottom: 0px; } 

For your body:

body {     margin-bottom:50px; } 

#footer {    background-color: red;    position: fixed;    bottom: 0px;    left: 0px;    right: 0px;    height: 50px;    margin-bottom: 0px;  }    div {    margin: 20px 20px;  }    body {    margin-bottom: 50px;  }

<div>    Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:    0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright    bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the    bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally    pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts    at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always    fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using    some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and    see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.    I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for    the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site    have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc.    Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside    of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most    people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's    container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people    can have a look at it right now and see what the current code is to amend.  </div>  <div id="footer">    This is footer  </div>

jsFiddle Demo

Answer 2

We can use FlexBox for Sticky Footer and Header without using POSITIONS in CSS.

.container {    display: flex;    flex-direction: column;    height: 100vh;  }    header {    height: 50px;    flex-shrink: 0;    background-color: #037cf5;  }    footer {    height: 50px;    flex-shrink: 0;    background-color: #134c7d;  }    main {    flex: 1 0 auto;  }

<div class="container">    <header>HEADER</header>    <main class="content">      </main>    <footer>FOOTER</footer>  </div>

DEMO - JSFiddle

Note : Check browser supports for FlexBox. caniuse