效果解释

image.png

文字解释就是内容不足时，显示在页面底部；
如果内容多时，显示在内容的下面；

我们同样用flex的弹性盒方案来实现：

  1. .demo{
  2.   min-height:100vh;
  3.   display:flex;
  4.   flex-direction:column;
  5.   word-break:break-all;
  6.   .main{
  7.     flex:1 0 auto ;
  9.   }
  10.   .footer{
  11.     height:20px;
  12.     margin-top:auto;
  14.     border:1px solid red;
  16.   }
  17. }

代码地址：https://codepen.io/robinson90/pen/yLerNEL