Question

这个问题可能会重复！我希望页脚位于页面底部，但在滚动时不固定在那里。我希望它像本页Footer Example底部的页脚一样。到目前为止，这是我的页脚代码，我一直在使用bootstrap 4，但是找不到适合我需要的类。

<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-twitch"></i></a>
</footer>

我很清楚bootstrap类

.fixed-bottom，但就像我说的那样，我不想在滚动时保留页脚。

Answer 1

您可以使用纯CSS，如下所示：

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color:#fff;
}

Answer 2

我认为您可能会从Flexbox中受益，除非我误解了您要做什么。无论哪种方式，我都相信Flexbox是答案，请告诉我this works for you是不是还是我们可以做得更深入。

这是密码笔：https://codepen.io/codespent/pen/eKqzjX

body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  justify-content: center;
}

footer {
  flex: 0 0 auto;
  display: flex;
  color: #ccc;
  margin: 1em;
  padding: 1em;
  width: 80%;
  border-top: 1px solid blue;
  justify-content: center;
}

footer i {
  padding: 1em;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<body>
  <div class="main">
    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>

    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>
  </div>
</body>
<div class="wrapper">
  <footer>
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-google-plus"></i></a>
    <a href="#"><i class="fa fa-twitch"></i></a>
  </footer>
</div>

那么这里重要的是什么？

我们正在将文档的 body 用作 Flexbox 容器，以允许我们的内部元素成为flex项目。
我们将flex-direction设置为column，使其像传统文档流一样垂直流动。
我们为 main 容器赋予flex-grow值1，以填充所有未占用的空间。
我们为footer提供了自动伸缩功能，同时又使其成为伸缩容器，使我们的链接在水平方向上与工作空间轻松对齐。

如何使页脚停留在页面引导程序4的底部

2 个答案: