粘性页脚 bootstrap 4

Question

我正在尝试使用 bootstrap 制作粘性页脚 4. 如何确保无论有多少内容始终停留在屏幕底部？我已经查找了粘性页脚的其他答案，但无法使其正常工作，所以我想分享我的代码。我试过从固定的、绝对的和相对的 none 中改变位置。在另一个项目中，我能够让它与 absolute 一起工作。跟我的css for html和body有关系吗？

HTML

<footer class="footer">
    <!-- <div class="container-fluid"> -->
    <a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a>
    <a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a>
    <a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
    </a>
    <a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
    </a>
    <p id="copyRight">@Copyright 2018 www.lucasstahl.com</p>
    <!-- </div> -->
</footer>

CSS

body,
html {
width: 100%;
height: 100%; 
/* min-height: 100%;
position: relative; */
background-position: center;
background-image: url("clark.png");
background-size: cover;
}

.footer {
/* clear: both; */
/* position: absolute; */
background-color: rgb(229, 240, 136);
text-align: center;
color: rgb(175, 167, 166);
border-top: 5px solid  rgb(175, 167, 166);
overflow: hidden;
padding-top: 20px;
bottom: 0;
width: 100%;
height: 100px;
}

我遇到的问题是它会根据屏幕大小移动页脚。它不会一直呆在那里。

Answer 1

对于不同的屏幕，您需要使用 media queries 这将允许您在屏幕的每种尺寸下定义页脚的外观。

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/就是你需要的东西

看看我提供的代码jsfiddle

<footer class="footer">
  <!-- <div class="container-fluid"> -->
  <nav>
    <li><a href="https://www.facebook.com/lucas.stahl.75">
        <i class="fa fa-facebook"></i>
    </a></li>
    <li><a href="https://twitter.com/LucasStahl11">
        <i class="fa fa-twitter"></i>
    </a></li>

    <li><a href="https://www.linkedin.com/in/lucasstahl">
        <i class="fa fa-linkedin"></i>
        </a></li>
    <li><a href="https://lucasstahl.wordpress.com/">
        <i class="fa fa-wordpress"></i>
        </a></li>

    <li id="copyRight">@Copyright 2018 www.lucasstahl.com</li>
  </nav>
  <!-- </div> -->
</footer>

CSS

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: yellow;
  }

  nav {
    display: flex;
    list-style: none;
  }

粘性页脚 bootstrap 4

Sticky footer bootstrap 4

css

footer

sticky-footer