引导程序 3.3.5 未将页脚粘贴在页尾答案

【问题标题】：Footer is not sticked at page end with bootstrap 3.3.5引导程序 3.3.5 未将页脚粘贴在页尾
【发布时间】：2016-02-28 09:57:35
【问题描述】：

我将 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 天了，没有谷歌搜索可以帮助我

【问题讨论】：

当内容不长于页面本身时就会出现问题。这个问题已经解决了好几次了，such as here
你是否为body设置margin-bottom: 60px;？
还有here's a tutorial that has good examples。
@Jdsfighter 我在某处读到这个行为是因为首页缺少数据造成的，所以push方法不能正常工作
@Ange1 这是正确的。如果您在浏览器中使用开发人员工具，您会注意到站点的内容区域比视口高度短。这会导致页脚直接放置在您的内容区域之后。要解决此问题，请遵循众多教程之一或查看此处提出的一些类似问题。

标签： html css twitter-bootstrap asp.net-mvc-5 footer

【解决方案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>

【讨论】：

好的，让我尝试修复 :)
好的，页面包装器是整个问题，网站的主要 css 没有为此定义的属性。非常感谢你，你是生命的救星