响应式高度与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，over