Sticky footer needs to clear wrapper content

Question

I have searched the web for the answer about a sticky footer, and have found a partial answer to my question. I have placed a fixed position on my footer wrapper so as the browser screen is re-sized the footer always sticks to the bottom. This works great with large screens but as soon as the screen becomes smaller the footer goes behind the wrapper content area. Please, can someone tell me how to apply this sticky footer so that it clears the wrapper and content area? See the following code

HTML CODE:

<html>
<body>
<div id="master-wrapper">    
<div class="wrapper">

<div class="main-content clearfix">

<div class="can-wrapper">
<div class="can-img"></div><!-- end .can-img -->
</div><!-- end .can-wrapper -->

</div><!-- end .main-content -->


</div><!-- end .wrapper -->
<div class="footer-wrapper">
<footer>
</footer>
</div><!-- end .footer-wrapper -->

</div><!-- end #master-wrapper -->
</body>
</html>

CSS CODE:

html {height:100%;}

body {
margin:0px;
padding:0px;
top:0;
width:100%;
height:auto;
min-height: 100%;
min-width: 100%;
    }

#master-wrapper {overflow: hidden; position: relative; width: 100%; height:100%; min-height:100% }
.wrapper {margin:196px auto -4em; position: relative; width: 950px; padding:0px 20px 156px; min-height:100%; z-index:1;}

.footer-wrapper {position:fixed; margin-top:-139px; clear:both; bottom:0; width:100%; height:139px; background:#C0A18F;}
footer {margin:50px auto; width:950px; padding:0px;}

What I need is for the footer to start to stick after about 800px(H) almost an 800px margin-top value.

I GREATLY APPRECIATE ANY HELP WITH THIS !!

There's a similar topic with a working Sticky Footer code: http://stackoverflow.com/questions/1112082/problem-with-css-sticky-footer-implementation#1112136%22Sticky%20Footer%22 — BlueCacti, Sep 16 '13 at 14:01
You can also check this site: http://www.cssstickyfooter.com/ — BlueCacti, Sep 16 '13 at 14:03

score 0 · Answer 1 · answered Sep 16 '13 at 14:05

HTML

   <div id="wrapper">
      <p>lots of content</p>
   </div>
   <div class="stickyFooter">
      <p>Content for sticky footer</p>
   </div>

CSS

.stickyFooter {
     position: fixed;
     bottom: 0px;
     width: 100%;
     overflow: visible;
     z-index: 99;
     padding-top: 5px;
     padding-bottom: 3px;
     background: white;
     border-top: solid white 2px;
     background-color: #89D4DF;
     -webkit-box-shadow: 0px -5px 15px 0px #bfbfbf;
     box-shadow: 0px -5px 15px 0px #bfbfbf;
     height: 34px;
}

Sticky footer needs to clear wrapper content

1 Answers1