bootstrap 3.3.5 页脚未固定在页尾

Question

我将 Boostrap 3.3.5 与 MVC（我的第一个 MVC 应用程序）一起使用，但页脚有问题。与以下 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;    
}

我得到以下视图：

和：

所以，有了这个 css 我可以在数据不多的时候在页面底部找到它，但是当页面必须向下滚动时它会与内容重叠。

但是，如果我将 CSS 更改为：

.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;    
}

我在主页上有这个视图：

所以，它确实粘在了页面的末尾，但在主页上，页脚没有被充分压低。现在已经 3 天了，没有谷歌搜索可以帮助我

Answer 1

这里是 codepen 说明建议的修复。

我只是添加了

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;
}

到CSS，我把HTML改成了下面的

<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>

bootstrap 3.3.5 页脚未固定在页尾

Footer is not sticked at page end with bootstrap 3.3.5

html

css

twitter-bootstrap

asp.net-mvc-5

footer