Question

我在使用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;
}

我已经摆弄了几天，我无法让它发挥作用。感谢您提供的任何帮助：）

Answer 1

在html上使用Position relative，也会使footerclass相对。

如果我是你，我只会添加相对于.row类，这将使页脚定位为绝对。由于绝对是遵循相对定位..

引导程序中的粘性页脚设置无法正常工作

1 个答案: