1.闲聊时间
在我接触书本这小节内容之前，刚做了一个微信的移动端页面，我遇到了这个问题。我是怎么解决的呢？当然是万能的JS了。

我的思路是获取body的大小，如果body大小 小于 窗口大小，那么就把body大小设置成窗口大小，否则什么也不干。
看了作者的解决方法之后，瞬间感觉自己太low了，恨不得马上回去修改以前的代码

2.我们先来看看需要用到的情况
这里图片中我的页面有滚动条是因为body有默认的margin，请忽略

页尾没有在浏览器底部

我们往往希望它是这样的！

页尾固定

小测试

html

<header>   
  <h1>Site Name</h1>
</header>
<main>  
  <p>Bacon Ipsum dolor sit amet</p>
</main>
<footer> 
  <p>© 2016 no rights reserved</p>    
  <p>Made with by an anonymous pastafarian.</p>
</footer>

css
首先我们设置一些基本样式

header{    
  width: 100%;  
  text-align: center;
}
main{    
  width: 100%;  
  text-align: center;
}
footer{  
  width: 100%;  
  text-align: center;
  background: burlywood;
}

现在的样子：

下一步：
我们将body设置为流布局

body{
  display: flex;
}

我们再设置属性

body{
  display: flex;
  flex-direction: column;
}

下一步（关键的一步）
设置body

body{   
 display: flex;
 flex-direction: column; 
 min-height: 100vh;
}

main{
  flex: 1;
}

这样我们就实现了固定页尾的效果

固定页尾