Footer is not sticked at page end with bootstrap 3.3.5

Question

I am using Boostrap 3.3.5 with MVC (my first MVC Application), and I have a problem with the footer. with the following css:

.footer-distributed{
    position:absolute;
    bottom:0;
   background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%; 
    text-align: left;
    font: bold 16px sans-serif; 
    padding: 35px 30px;
    margin-top: 80px;    
}

I get the following view:

and:

So, with this css I can get it at the bottom of the page when there is not much data, but it overlaps the content whenever the page has to scroll down.

However, if I change the CSS to:

.footer-distributed{
    position:static;
   background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%; 
    text-align: left;
    font: bold 16px sans-serif; 
    padding: 35px 30px;
    margin-top: 80px;    
}

I have this View on the main page:

So, it does stick to the end of the page, but at the main page, the footer is not pushed down enough. Is been 3 days now, and no googling could help me

The problem arises when the content is not longer than the page itself. This question has been addressed several times, [such as here](http://stackoverflow.com/questions/12239166/footer-at-bottom-of-page-or-content-whichever-is-lower) — JD Davis, Nov 25 '15 at 14:48
And [here's a tutorial that has good examples](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/). — JD Davis, Nov 25 '15 at 14:49
@Jdsfighter I read somewhere that this behaviour is caused because of the lack of the data in the first page, so the push method can not work properly — Ange1, Nov 25 '15 at 14:51
@Ange1 this is correct. If you use the developer tools in your browser, you'll notice that the content area of your site is shorter than the viewport height. This causes the footer to be placed directly after your content area. To fix this, follow one of the many tutorials or look at some of the similar questions asked here. — JD Davis, Nov 25 '15 at 14:54
@Jdsfighter you can blame my lack of experience in bootstrap and webdesign, but the first images were the result I get after following the answers in SO. http://tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/ This is the footer I wanted to impelement — Ange1, Nov 25 '15 at 14:56
Can you perhaps create a jsfiddle or codepen with your relevant code so that we can see the problem in action? — JD Davis, Nov 25 '15 at 14:59
@Jdsfighter https://jsfiddle.net/5b1frubs/3/ here you got the full css of the footer, and for the body I use the standart bootstrap 3.3.5 css file — Ange1, Nov 25 '15 at 15:08

score 2 · Accepted Answer · answered Nov 25 '15 at 15:26

Here is a codepen that illustrates a proposed fix.

I merely added

html,body {
  height:100%;
}

.page-wrapper {
  min-height: 100%;
  margin-bottom: -319px; 
}

.page-wrapper:after {
  content: "";
  display: block;
}

.footer-distributed, .page-wrapper:after {
  height:229px;
}

to the CSS, and I changed the HTML to be the following

<body>
  <div class=" page-wrapper ">
    Content
  </div>
<footer class="footer-distributed ">
        <div class="footer-left ">
            <h3>TiBO<span>IPTV</span></h3>
            <div>
                <p class="footer-company-name ">TiBO IPTV &copy; 2015</p>
            </div>
        </div>
        <div class="footer-center ">
            <div>
                <i class="fa fa-map-marker "></i>
                <p><span>Blv Gjergj Fishta , Pll G&P,Kati II 1001 </span> Tirane, Albania</p>
            </div>
            <div>
                <i class="fa fa-phone "></i>
                <p>+355 67 600 67 67</p>
            </div>
            <div>
                <i class="fa fa-envelope "></i>
                <p><a href="mailto:info@tibo.tv ">info@tibo.tv</a></p>
            </div>
        </div>
        <div class="footer-right ">
            <p class="footer-company-about ">
                <span>About the company</span>
                Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
            </p>
        </div>
    </footer>
</body>

Ok, the page-wrapper was the entire issue, the main css of the site didn't have a defined property for that. Thank you very much, you are a life savior — Ange1, Nov 26 '15 at 09:14

Footer is not sticked at page end with bootstrap 3.3.5

1 Answers1