关于min-height:100%的解决办法

Posted 2020-06-14

　　前几天碰到一个问题，在用bs和jq2.2.0开发时，min-height设为100%在firefox和ie下没有起作用，先用css改了一下，但是min-height虽然是奏效了，但同时出现了其他css问题，千丝万缕，随后万能的js完美解决问题，简单粗暴。

　　首先说一下问题产生的原因：jq2+获取heigh没有兼容Ie，故height()不行。

　　查阅资料知：窗口的高度

　　firefox、chrome、IE9和safari:window.innerHeight

　　IE系列:document.body.clientHeight

　　不是IE6：document.documentElement.clientHeight

　　故兼容代码如下：

1 var height = window.innerHeight || (document.body ? document.body.clientHeight : false) || (document.documentElement ? document.documentElement.clientHeight : null);

　　innerHeight获取窗口的文档显示区的高度，但是ie不支持，它用 documentElement.clientHeight 或 document.body.clientHeight 替代。故上面的代码可兼容ie。

　　不是ie时，取innerHeight，ie时若documentElement.clientHeight为真则取documentElement.clientHeight，若document.body.clientHeight 为真则取document.body.clientHeight 。

　　至此问题完美解决，赋值给min-height即可。