粘性页脚引导程序 4 [重复]

Posted 2023-03-21

【中文标题】粘性页脚引导程序 4 [重复]

【英文标题】：Sticky footer bootstrap 4 [duplicate]

【发布时间】：2018-08-17 10:35:45

【问题描述】：

我正在尝试使用 bootstrap 4 制作一个粘性页脚。如何确保无论有多少内容始终停留在屏幕底部？我已经查找了关于粘性页脚的其他答案，但无法让它工作，所以我想分享我的代码。我试过从固定的、绝对的和相对的位置改变位置，这些都不起作用。 在另一个项目中，我能够让它与 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;

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

【问题讨论】：

您检查过official example 和tried something yourself 吗？在复制示例时，您到底在哪里卡住了？

你目前有什么代码？

css-tricks.com/couple-takes-sticky-footer

【参考方案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;
  

【讨论】：

没关系，通常你会先搜索网站，如果之前没有问过这个问题，那么你会问并提供一些代码，如果你有的话。如果您的问题已得到解答，您将接受所提供的答案。

好的，我回去添加了我的代码抱歉，这是我的第一篇文章，不知道要添加我的代码的 4 个缩进。此外，我之前确实查看了粘性页脚，但我一直看到固定或绝对。当我使用 absolute 时，它​​会将其移动到页面的中间，如果我设置为 fixed，它会切断底部的内容。

@Stahlwalker 包含 HTML 和相关的 CSS 或使用 JS Fiddle。

好的，添加了我的 HTML

感谢 Paul，这与我的 index.html 文件有关，与我的页脚无关，但是一旦我修复它，我必须重新打开绝对位置。非常感谢。