Bootstrap 4粘性页脚

Question

Bootstrap 4粘性页脚

3

我将尝试使用Bootstrap 4制作一个固定的页脚。无论内容有多少，如何确保它始终停留在屏幕底部？我查找了其他关于固定页脚的答案，但都无法使其正常工作，因此我想分享我的代码。我尝试更改位置（fixed、absolute和relative），但都不起作用。在另一个项目中，我使用absolute成功了。这是否与我的html和body的css有关？

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

我遇到的问题是，底部栏会随着屏幕大小而移动，无法始终保持在原位。

- Stahlwalker

你是否查看了官方示例并且尝试过自己的方法？在复制示例时，你卡在哪里了？ - Obsidian Age

你目前有什么代码？ - Paul McLoughlin

https://css-tricks.com/couple-takes-sticky-footer/ - Dan Oswalt

1个回答

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

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

- Paul McLoughlin · Accepted Answer

针对不同的屏幕，您需要使用媒体查询来定义每个屏幕尺寸下页脚的外观。请参考媒体查询。

看起来您需要的是这个。请查看我提供的代码jsfiddle。保留HTML标签。

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