如何实现css上中下布局，高度不足，footer固定在底部，如出现滚动条，footer和body部分一并向下滚动？

Question

如何实现css上中下布局，高度不足时，footer固定在底部，如出现滚动条（高度比较大了），footer和body部分一并向下滚动？

网上找了一段，可以固定在底部，但是当body高度超过一屏时，footer 并不会出现在最下面

<div class="wapper xxy-zh">
  <div class="header">
    上、中、下布局案例
  </div>
  <div class="content">
    body 部分
  </div>
  <div class="footer">
    Copyright © 2014 -2016 粤 ICP 备 14052360 号
  </div>
</div>

.wapper{
    background: #f8f8f8;
    /*position: relative;*/
    height: auto;
    min-height: 100%;
    background-color: #fff;
}

.header{
  height: 100px;
  background-color: red;
}

.content{
  /*主要代码应该是这句*/
  padding-bottom: 81px;/*footer 的高度*/
}

.footer{
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #d8dfe7;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    background: #fff;
}

Answer 1

……就是把footer放进content里？

Answer 2

https://codepen.io/jackpan/pe...

Answer 3

footer可以fix

Answer 4

谢谢各位小伙伴，原来之前在精简代码的的时候把主句注释掉了——之前发现可以不要，但是现在又必须要

.wapper{
    background: #f8f8f8;
    /*position: relative;*/ /*放开这句即可*/
    height: auto;
    min-height: 100%;
    background-color: #fff;
}

Answer 5

html {
  min-height: 100%;
  position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}

这个很简单，肯定好，不好接着找我

Answer 6

看看这个，不知道是不是你想要的，https://blog.csdn.net/u012076...

Answer 7

https://codepen.io/jx915/pen/...

Answer 8

bootstrap 的实例精选里面就有这种布局