Question

我有以下网站结构：

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

问题是：如何创建具有这种结构的粘性页脚？我尝试了不同来源的不同变种，但没有固定的页脚。这只是＆＃34;飞行＆＃34;在页面上。如果你需要CSS - 在评论中输入。

感谢。

编辑：

＆＃13;

.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;
}

＆＃13;

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

Answer 1

column min-height: 100vh .wrp且flex-grow: 1设置为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>

python3.6 -m venv --without-pip test
source test/bin/activate
curl https://bootstrap.pypa.io/get-pip.py | python
deactivate
source test/bin/activate

Answer 2

我会使用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 3

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

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

}

这里是小提琴link

Answer 4

将此CSS添加到页脚类

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

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

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

4 个答案: