儿童页眉和段落元素不会留在粘性底部页脚和更好的页脚实现中？

Question

我目前正在尝试将页脚元素的内容保持在内部并居中。然而，他们并没有呆在里面。我还希望它能够响应移动设备，因此无论页脚大小如何，它们都会留在页脚内。

另外，有没有更好的方法可以实现始终位于中间内容下方的移动响应页脚？

这是我当前的代码：

/* Footer Styling */

footer{
    width:100vw;
    height: 5%;
    background-color:#FFF6E3;
    position:absolute;
    bottom:0;
    text-align:center;

}

footer h3 {
    margin-top: 2%;
    font-family: Helvetica;
    font-style: normal;
    font-weight: bold;
    font-size: 31px;
    line-height: 36px;
    color: #BB7720;
}

footer p, a {
    font-family: Baskerville;
    font-style: italic;
    font-weight: normal;
    font-size: 31px;
    text-align: right;
    letter-spacing: 0.07em;
    text-align:center;
    color: #946E29;
}

<footer>
    <h3>CONNECT WITH BUN BUN</h3>
    <p>Contact us at <a href="#">bunbun@gmail.com</a></p>
</footer>

Answer 1

为了创建移动响应页脚，您必须添加媒体查询。要添加媒体查询，您需要确定要在其中添加对 CSS 的更改（称为断点）的浏览器窗口宽度以及要在该点之后添加更改的 html 元素。以下代码将帮助您帮助您的文本元素在屏幕变小时时浮动到页脚容器之外。

@media only screen and (max-width: 600px) {
  footer h3 {
    margin-top: 20px;
  }
} 

Answer 2

我认为word-break: break-word; 是您正在寻找的。​​p>

尝试将其添加到您的 css 中

footer h3, footer p, footer a {
  word-break: break-word;
}

还有另一种制作页脚的方法。不需要使用position: absolute; 使您的页脚停留在底部。但这取决于您完成其他元素的方式。

footer {
  background-color: #FFF6E3;
  text-align: center;
  padding: 2rem;
}

footer h3 {
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  line-height: 2.25rem;
  color: #BB7720;
  padding-bottom: 1rem;
}

footer p, footer a {
  font-family: 'Baskerville', sans-serif;
  font-style: italic;
  letter-spacing: 0.1rem;
  color: #946E29;
}

footer h3, footer p, footer a {
  font-size: 2rem;
  word-break: break-word;
  margin: 0;
}

<footer>
  <h3>CONNECT WITH BUN BUN</h3>
  <p>Contact us at <a href="#">bunbun@gmail.com</a></p>
</footer>

注意：还可以考虑使用@media 查询。特别是小屏幕上的字体大小。