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

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

div {
  padding: 2px;
  border: 1px solid;
}
.div1 {
  float: left;
  width: 100px;
}
.div2 {
  position: absolute;
  width: 39px;
  height: 24px;
}
.div2-wrapper {
  float: right;
  position: relative;
  left: -45px;
}
.wrapper {
  float: left;
}
.div3,
.div4 {
  float: left;
}
.container {
  float: left;
  padding-right: 50px;
}

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

Answer 2

添加bottom: 0和margin-bottom: 0以将其放在页面下方。 .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%; }删除底部空间。尽量避免使用！important并在所有CSS代码之后使用额外的CSS。

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

{{1}}

Answer 3

查看 LIVE

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