Search code examples
htmlcsstwitter-bootstrapasp.net-mvc-5footer

Footer is not sticked at page end with bootstrap 3.3.5

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: enter image description here

and: enter image description here

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:enter image description here

enter image description here

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

Solution

  • 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:[email protected] ">[email protected]</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>