响应式页脚不能位于页面底部

Question

我试图通过引导程序使页脚位于页面底部（但不固定），但似乎无法正常工作。 它和页面底部之间似乎存在某种间距。

这是我的问题的一个示例： https : //jsfiddle.net/whywymam/hj22ggep/

.footer {
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.footer li {
    display: inline;
}
.copyright {
    margin-top: 1%;
}

<nav class="navbar navbar-default navbar-bottom footer" role="navigation">
  <div class="footer">
            <ul>
            <li><a href="about.php">About Us</a> | </li>
            <li><a href="contact.php">&nbsp; Contact Us</a> |</li> 
            <li><a href="terms&condition.php">&nbsp; Term of Use</a></li>
            </ul>
            <p class="copyright"> All Rights Reserved</p>
        </div>
</nav>

Answer 1

您可以添加CSS

.footer{
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 100%;
position:absolute;
bottom:0px;
}

你可以在这里看到https://jsfiddle.net/qy4vujyf/

Answer 2

添加position: absolute和bottom: 0 ，将其定位在页面下方。 margin-bottom: 0删除底部空间。 尽量避免！important并在所有CSS代码之后使用其他CSS。

 .footer { display: inline-block; text-align: center; margin-left: auto; margin-right: auto; width: 100%; position: absolute !important;; bottom: 0; margin-bottom: 0 !important; } .footer li { display: inline; } .copyright { margin-top: 1%; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-bottom footer" role="navigation"> <div class="container"> <ul> <li><a href="about.php">About Us</a> |</li> <li><a href="contact.php">&nbsp; Contact Us</a> |</li> <li><a href="terms&condition.php">&nbsp; Term of Use</a> </li> </ul> <p class="copyright">All Rights Reserved</p> </div> </nav> 

Answer 3

观看实况

的CSS

.footer {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.container {
    position:absolute;
    bottom:0;
    width: inherit;
    margin-left: auto;
    margin-right: auto;
}
.footer li {
    display: inline;
}
.copyright {
    margin-top: 1%;
}