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

Question

我有以下网站结构：

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

问题是：如何创建具有这种结构的粘性页脚？我尝试了来自不同来源的不同变体，但没有固定的页脚。它只是页面上的 "flying"。如果您需要 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;
}

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

Answer 1

我会使用 flexbox：

CSS

body {
  margin: 0;
}

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

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

.footer {
  background-color: green;
  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;
}

Answer 2

您可以使用相对定位，将页脚放在页面底部。

.wrp {
  max-width: 1350px;
  margin: 0 auto;
  min-height:calc(100vh - 100px); 
}
.footer {
width:100%;
height:100px;
background:#111;
position:relative;
bottom:0px;

}

这是fiddlelink

Answer 3

将 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>

Answer 4

将此 CSS 添加到页脚 class

.footer {
    position: fixed;
    bottom: 60px;
  }

将其设置在 CSS 的底部。您可能需要调整 bottom .

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

How to create sticky footer in unusual site structure?

html

css

footer