子页眉和段落元素不会留在粘性页脚和更好的页脚实现中吗？

问题描述

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

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

这是我当前的代码：

<body>
  <header>
    <h1>To-Do List</h1>
  </header>
  <form>
    <input type="text" class ="todo-input">
    <button class="todo-button" type="submit">
      <i class="fas fa-plus-square"></i>
    </button>
    <div class="select">
      <select name="todos" class="filter-todo"  >
        <option value="all">All</option>
        <option value="completed">Completed</option>
        <option value="uncompleted">Uncompleted</option>
      </select>
    </div>
  </form>
  <div class="todo-container">
    <ul class="todo-list">

    </ul>

  </div>
  <script src="apps.js"></script>
</body>
enter code here

/* 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;
}

解决方法

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

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

我认为您正在寻找word-break: break-word;。

尝试将其添加到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 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查询。尤其是在较小屏幕上的字体大小。

children containers footer html

子页眉和段落元素不会留在粘性页脚和更好的页脚实现中吗？

问题描述

解决方法

相关问答