html - 如何在不寻常的网站结构中创建粘性页脚？-6ren

html - 如何在不寻常的网站结构中创建粘性页脚？

转载作者：行者123 更新时间：2023-11-28 15:42:24

我有以下网站结构:

  <body>
    <div class="page">
      <div class="wrp">....</div> 
      <footer class="footer">...</footer>
    </div>
  </body>

问题是:如何创建具有这种结构的粘性页脚？我尝试了来自不同来源的不同变体，但没有固定的页脚。它只是在页面上“飞”。如果您需要 CSS - 请输入注释。

谢谢。

编辑:

.wrp {
  max-width: 1350px;
  margin: 0 auto;
}

.footer {
  background-color: #f7f7f7;
  font-size: .9em;
  padding: 25px 0;
  border-top: 1px solid #d9d9d9;
}

.footer a,
.footer {
  color: #838383;
}

.footer .midside {
  display: flex;
}

.footer .copyright {
  width: 100%;
}

.copyright a {
  font-weight: bold;
}

附言这是我的第一个问题，所以如果我做错了什么，请告诉...

最佳答案

min-height: 100vh 和 .wrp 设置为 flex-grow: 1 的 flex column > 将页脚放在底部

body {
  margin: 0;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrp {
  max-width: 1350px;
  width: 100%;
  margin: 0 auto;
  flex: 1 0 0;
}

.footer {
  background-color: #f7f7f7;
  font-size: .9em;
  padding: 25px 0;
  border-top: 1px solid #d9d9d9;
}

<div class="page">
  <div class="wrp">wrp</div>
  <footer class="footer">footer</footer>
</div>

关于html - 如何在不寻常的网站结构中创建粘性页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43284841/

文章推荐： javascript - 使用 JFiddle 创建网页

文章推荐： jquery - 切换类不起作用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在不寻常的网站结构中创建粘性页脚？