头尾固定高度中间自适应高度

这是关于常用的css布局技巧：

需求：头部和尾部高度固定，中间高度自适应

ps:我这里不贴代码，只是讲技术点和思路，毕竟我这个不是教程，我只是希望用我的一点点时间写一些博客，可以给那些刚入门的前端同学一点点帮助。

1.兼容低版本ie的写法

head:  头部设置固定高度，例如高度100px

content：设置绝对定位，top：100px;  bottom:100px; left:0,right:0;overflow:scroll; (这里就是利用当一个盒子绝对定位后，如果没有设置宽度高度，盒子将会填满到定位的地方)

footer:绝对定位，宽度100%，高度100px，bottom:0;  ps：注意content中的定位和head  footer的固定高度有关

2.用css3 的 calc()函数，head，content，footer都不需要脱离标准流，缺点是不兼容ie9以下的

head: 头部正常设置固定高度

content：设置高度为，height:calc(100vh - 头部和底部的固定高度 )；overflow:scroll; 

ps:注意 - 号两边要有一个空格，100vh是代表显示窗口的高度，100%是父元素的高度，与之对应的还有一个100vw,某些应用场景这些css单位很有用

footer：设置固定高度

实现的方法有很多，如果你有更好的解决方案，可以留言，帮助更多正在探索的同学。

ps:多说一句，上面的原理也可以用来实现另一种布局，左右两块相同高度的布局，具体例子我就不说了，一通百通，相信你懂的，继续搬砖去