如何使页脚随内容移动（使其具有响应性）？答案

【问题标题】：How can I make my footer move with the content (make it responsive)?如何使页脚随内容移动（使其具有响应性）？
【发布时间】：2021-02-18 04:21:31
【问题描述】：

如何制作页脚

没有可滚动的内容时位于底部。
内容多时移动。

到目前为止，我有以下 CSS 代码：

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.footer-link a {
    color: #5f5f79;
    font-size: 87.5%;
    text-decoration: none;
}
.footer-link {
    margin: 0px 60px;
}
.copy {
    color: #5f5f79;
    font-size: 87.5%;
    margin-top: 5px;
}

...还有 HTML：

<div class="footer">
        <p class="footer-link"><a href="impressum.html">Impressum</a></p>
        <p class="copy">Coypright 2020</p>
        <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
      </div>

【问题讨论】：

标签： javascript html css responsive-design web-deployment

【解决方案1】：

您可以进行以下更改：

.footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    font-size: 150%;
    color: white;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

但是您需要确保页脚的容器元素具有padding-bottom: 70px; - 这意味着容器使用等于页脚高度的像素填充内容。这样，页脚不会覆盖任何内容。

也许您可以使用jsfiddle 将您拥有的所有代码放入其中。

【讨论】：

【解决方案2】：

您必须更改 HTML 结构。您需要制作一个包装器 div，您的页脚和内容将驻留在其中。

您希望通过使用 position: absolute 并将 padding-bottom: footer-height 保留在包装器 div 中，将页脚固定在包装器的底部。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrapper{
  position: relative;
  border:5px solid black;
  min-height: 100vh;
  padding-bottom: 70px;
}
.other-content{
  border:5px solid red;
  font-size: 34px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 150%;
  color: white;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-link a {
  color: #5f5f79;
  font-size: 87.5%;
  text-decoration: none;
}
.footer-link {
  margin: 0px 60px;
}
.copy {
  color: #5f5f79;
  font-size: 87.5%;
  margin-top: 5px;
}

<div class="wrapper">
  <div class="other-content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis vero maiores odio nulla voluptas, officiis numquam modi ipsa reiciendis eos quae vel magnam doloremque, et culpa recusandae sint animi iste. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi unde similique quis reiciendis recusandae est dignissimos. Commodi porro reprehenderit ex ipsum, ullam excepturi adipisci quod, numquam nulla praesentium delectus magni!</div>
<!-- other content -->
  <div class="footer">
    <p class="footer-link"><a href="impressum.html">Impressum</a></p>
    <p class="copy">Coypright 2020</p>
    <p class="footer-link"><a href="datenschutz.html">Datenschutz</a></p>
  </div>
</div>

【讨论】：