如何使页脚随内容移动(使其响应)

Question

如何使页脚

1. 在没有可滚动内容时位于底部
2. 内容丰富时移动

到目前为止，我有以下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>

Answer 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把你所有的代码都放进去

Answer 2

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

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

* {
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>