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>

页脚结束时，页脚没有粘贴到引导程序3.3.5

1 个答案: