Bootstrap中的粘性页脚设置无法工作

Question

Bootstrap中的粘性页脚设置无法工作

3

我在使用Bootstrap实现网页粘性页脚时遇到了问题。可以在这里查看网站：http://lollyborch.github.io/testfolio/testfolio.html

以下是HTML代码（页脚和其他元素位于不同的容器中）：

<footer class="footer">
  <div class="container">
    <ul class="soc">
        <li><a class="soc-linkedin" href="https://www.linkedin.com/pub/lilly-borchardt/23/b20/197"></a></li>
        <li><a class="soc-twitter" href="https://twitter.com/lillyborchardt"></a></li>
        <li><a class="soc-tumblr" href="http://lollyandbee.tumblr.com/"></a></li>
        <li><a class="soc-instagram" href="http://instagram.com/lollyborch"></a></li>
        <li><a class="soc-pinterest soc-icon-last" href="http://www.pinterest.com/lollybee/"></a></li>
    </ul>
  </div>
</footer>

以下是CSS（取自http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css）：

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #00A79D;
  /*opacity: 0.5;*/
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

我已经折腾了几天，但就是无法让它正常工作。非常感谢您提供的任何帮助 :)

- LollyBee

2

Lilly，我看到你的SC代码，发现整个网站上都有id="pushit"的重复出现，ID应该是唯一的。这只是一个建议 :) - DJG22

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ImAtWar · Accepted Answer

在你的html上使用相对定位（Position relative）也会将footer class渲染为相对定位。

如果我是你，我会只在.row类中添加相对定位，这样可以使footer以绝对定位方式呈现。因为绝对定位遵循相对定位。