css设置 sticky footer

有时候，我们在设计界面中会有一个footer bar 想让它呈现 一下这种样式。这就是sticky footer。

 

 

他可以使用一下几种方式设置：

假设我们的dom结构是这样的：

<div class="wrapper">
    <div class="content" />
    <div class="footer" />
</div>

html,
body{
    height:100%;
}

 

• 1. position ：absolute

​
.wrapper {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
}
.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
}

​

• 2.使用 calc

注意： 若想使用 100vh 需要注意 vh是相对于 视口 而言 

.content {
  min-height: calc(
    100% - 50px
  ); 
}
.footer {
  height: 50px;
}

• 3.使用flex布局

.wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.content {
  flex: 1;
}