响应式高度与overflow的小总结

最近做了2个项目，一个web app针对手机移动端，另一个是传统网页针对PC端的用户。

两个项目都需要响应式的布局，比较偷懒的做法是使用一些栅格布局的框架如Bootstrap；虽然它能做到一定程度的响应式，但局限性也相当大，

细节微调很困难加上本身会有一些奇奇怪怪的默认设置导致css很难做定制化的修改。

故决定放弃框架自己写布局。

两个项目下来各种方案都尝试过，比较靠谱的响应式写法有以下两种：

1、将height设为0，通过padding-bottom来控制元素高度。

2、使用vw，vh等CSS3新加入的单位来实现响应式高度。

以上两种方式各有利弊，就目前碰到的状况来说最大影响的就是overflow这个属性。

具体来说，当使用方案1的时候给指定div设置overflow-y：auto属性时，会出现内部并未超过包裹div高度也会出现可拖动的滚动条，见下图：

height: 0;padding-bottom: 10%;overflow-y: auto;

究其原因，在于我们设置了height为0，overflow就以这个为基准线判断是否超过了最大高度，

于是不管内容多少都会出现滚动条，影响用户体验。

这个时候就可以考虑使用vw，vh这两个CSS3新添加的单位，其原理是以视窗宽高百分比来进行设置，就可以避免这个bug：

height: 8vw;overflow-y: auto;

相比较而言，vw新单位在这个方面更胜一筹。

但正如BLUE所说：“好用的东西一定有兼容性问题”。

IE上想支持vw，vh至少需要9，其他主流浏览器则没有太大问题。

具体大家可以到http://caniuse.com 这个网站去查看各大主流浏览器的兼容性。

总结：vw，vh能获得最好的响应式布局体验，但想要更好的兼容性则应该考虑height为0，padding-bottom撑开高度的写法。