how to achieve the upper, middle and lower layout of css. When the height is not enough, the footer is fixed at the bottom, such as the scroll bar appears (the height is larger and the), footer and body parts scroll down together?

A section has been found on the Internet, which can be fixed at the bottom, but when the height of the body exceeds one screen, the footer will not appear at the bottom

<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: -sharpf8f8f8;
    /*position: relative;*/
    height: auto;
    min-height: 100%;
    background-color: -sharpfff;
}

.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 -sharpd8dfe7;
    bottom: 0;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    background: -sharpfff;
}