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;
}
这样我们就实现了固定页尾的效果
固定页尾
