css实现页脚在页面最下方

本文实现如下效果：内容不足时，页脚位于底部

内容超过一页时保持在底部

实现方法：

HTML:

 <div class="box">
    <div class="main">
      <div class="content">
        <p v-for="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]">内容{{i}}</p>
      </div>
      <div class="foot">页脚</div>
    </div>
  </div>

class为content中的内容自定义（此处为vue模板中的循环），foot为页脚。

CSS:

  .box {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
  }

  .main {
    position: relative;
    min-height: 100%;
  }

  .content {
    padding-bottom: 150px;
  }

  .foot {
    position: absolute;
    bottom: 0;
    background: azure;
    color: black;
    height: 100px;
    width: 100%;
    line-height: 100px;

  }