【问题标题】: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;
}

【问题讨论】:

标签: html footer


【解决方案1】:

将页脚的 css 更改为以下:

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

【讨论】:

    【解决方案2】:

    只需删除您的position: relative;

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

    然后刷新

    【讨论】:

      猜你喜欢
      • 2022-11-23
      • 2016-04-14
      • 1970-01-01
      • 2015-07-28
      • 2012-08-11
      • 1970-01-01
      • 1970-01-01
      • 2017-02-12
      相关资源
      最近更新 更多