引导页脚未粘在页面底部

Question

我目前正在处理一些设计和前端问题，我并不是真正的定位和其他类似元素的前端专家。所以现在我已经在我的

<div class="container"></div>

中构建了一些设计，基本上，我的页脚靠近我的最后一个元素，现在在中间。我尝试使用

<br>

但这不是我想要的...我怎样才能将它设置在页面底部？谢谢！

我的代码：

<footer class="page-footer font-small bg-dark pt-5">

  <!-- Footer Elements -->
  <div class="container">
    <!-- Social buttons -->
    <ul class="list-unstyled list-inline text-center">
      <li class="list-inline-item">
        <a class="btn-floating btn-fb mx-1" href="https://www.facebook.com/UAB-Interkodas-1882309422025359/">
          <img alt="fb" width="30" src="{% static '/main/svgs/facebook.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-tw mx-1">
          <img alt="linkedin" width="30" src="{% static '/main/svgs/linkedin.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-gplus mx-1">
          <img alt="google_plus" width="30" src="{% static '/main/svgs/google-plus.svg' %}">
        </a>
      </li>
      <li class="list-inline-item">
        <a class="btn-floating btn-li mx-1">
          <img alt="google_maps" width="30" src="{% static '/main/svgs/google-maps.svg' %}">
        </a>
      </li>
    </ul>
    <!-- Social buttons -->

  </div>
  <!-- Footer Elements -->

  <!-- Copyright -->
  <div class="footer-copyright text-center text-light py-3">© 2020 Copyright: All rights reserved.
  </div>
  <!-- Copyright -->

</footer>
<!-- Footer -->

这是照片：

Answer 1

不要在页脚中使用

fixed-bottom

类，而是尝试这个。您可能需要稍微调整一下值，而不是使用 160px。

html {
  position: relative;
  min-height: 100%;
  padding-bottom:160px;
}
body {
  margin-bottom: 160px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 160px;
}

Answer 2

尝试添加

fixed-bottom

类：

<footer class="page-footer fixed-bottom font-small bg-dark pt-5">

注意：无论您有多少内容，这都会使页脚粘在浏览器窗口的底部。因此，当用户上下滚动时，他们将始终在屏幕上看到页脚。

Answer 3

您还需要更改

<html>

和

<body>

<!doctype html>
<html lang="en" class="h-100">
    <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    </head>
    <body class="d-flex flex-column h-100">
        <footer class="footer mt-auto py-3 bg-primary">
        </footer>
      </body>
 </html>

Answer 4

这是一篇旧帖子。也许会对某人有所帮助。

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

main {
    flex: 1;
}
.footer {
    width: 100%;
}

引导页脚未粘在页面底部

问题描述投票：0回答：4

4个回答

最新问题

引导页脚未粘在页面底部

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4