Javascript技巧之：body的height:100%高度，自适应窗口大小

　　经常需要设计一个全屏的html网页应用，但当你定义body直接子元素的高度为"100%"或通过以下代码设置元素高度时，确遗憾地发现body的高度并非当前窗口的可见高度。

<ELEMENT>.style.height=document.body.clientHeight+"px";

　　有的文章通过设置以下<style>解决此问题，但改变了body的style.height会造成一些不必要的影响和麻烦，比如不必要的滚动条、超出body高度部分的显示问题等。

html,body{height:100%}

　　那么，有什么办法解决此问题呢？答案是使用window.innerHeight：

function clientHeight(){
    var style=getComputedStyle(document.body);
    return window.innerHeight-parseInt(style.marginTop)-parseInt(style.marginBottom);
}

　　这样，当您要设置一个元素的高度正好是界面高度时，就简单了：

<ELEMENT>.style.height=clientHeight()+"px";

　　进而可以扩展以上代码，设计一个自适应窗口大小的应用：

        function resize(){
            app.style.height=clientHeight()+'px';
        }
        addEventListener('load',resize);
        addEventListener('resize',resize);

　　其中app可理解为：

<div id="app"></div>

　　祝编程愉快！若有用，希望赞一个。更多内容：参见【方 外】的博客