将页脚保持在底部答案

【问题标题】：Keep the footer in the bottom将页脚保持在底部
【发布时间】：2021-07-15 15:30:54
【问题描述】：

我的代码中的页脚停留在页面中间，我希望它动态移动到页面底部 .当我添加矩形时，页脚将移动更多底部。 HTML：

<div id="wrapper">

<header>
    <a href="index.html" id="logo"></a>
</header>
<nav class="index_nav">
    <ul>
        <li ><a href="index.html">Layout 1</a></li>
        <li><a href="layout2.html">Layout 2</a></li>
        <li class="selected"><a href="Layout3.html">Layout 3</a></li>
    </ul>
</nav>
    <main class="Rectangles">
    </main>
<footer class="footer3">
</footer>
</div>

CSS：

.Rectangles {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    position: relative;
}

.Rectangles>section {
    cursor: pointer;
    height: 350px;
    width: 333px;
}

.footer3 {
    position: relative;
    height: 48px;
    width: 100%;
    background-color: #d6d6d6;
}

【问题讨论】：

这能回答你的问题吗？ How do you get the footer to stay at the bottom of a Web page?

标签： html footer

【解决方案1】：

将页脚的 css 更改为以下：

.footer3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  background-color: #d6d6d6;
}

【讨论】：

【解决方案2】：

只需删除您的position: relative;

并更改为position: fixed; 或position: absolute;

然后刷新

【讨论】：