Sticky footer 页面底部

2018-07-12 本文已影响0人 mipaifu328

Sticky footer：页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

sticky-footer

实现的方式主要有以下几种：

1.Flexbox解决方案

核心代码：

<body>
  <div class="main">
    content
  </div>
  <div class="footer">footer</div>
 </body>

body{   
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main{
  flex: 1;
}
.footer{
  height:50px;
}

100vh（相对于视口的高度。视口被均分为100单位的vh）这里就不需要设置html{height:100%;}

2.calc()解决方案

核心代码：

<body>
  <div class="main">
    content
  </div>
  <div class="footer">footer</div>
 </body>

.main{
  min-height: calc(100vh - 50px - 1em);  /* 1em为元素之间的间距 */
}
.footer{
  background: #21BAA8;
}

这个方法需要注意减去元素之间的边距。

3.absolute解决方案

<body>
  <div class="main">
    content
  </div>
  <div class="footer">footer</div>
 </body>

body{
  margin:0;
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px;
  box-sizing: border-box;
}
.footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
}

4.负margin解决方案

这个方法需要增加额外的html元素。

<body>
  <div class="main">
    content
    <div class="push"></div>
  </div>
  <div class="footer">footer</div>
 </body>

.main{
  min-height: 100%;
}
.push{
  height: 50px;
}
.footer{
  margin-top: -50px;
  height: 50px;
}

这里也可以设置.mian{margin-bottom: -50px;}，思路一样。

5.Grid解决方案

<body>
  <div class="main">
    content
  </div>
  <div class="footer">footer</div>
 </body>

body{   
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer{
  grid-row-start: 2;
  grid-row-end: 3;
}

参考: