WEB前端开发

自适应高度布局比较常用，大家知道自适应宽度可以很方便的用css布局，但是自适应高度用css虽然能解决，但是比较麻烦，还不如写一段脚本来的的轻松多了。

原理:计算屏幕的高度，减去头部和底部的高度就OK了，

//计算文档的可见高度

function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}

//window.onresize是窗口改变大小的时候，因为窗口改变大小，文档的可见高度或宽度会变化。
window.onload=window.onresize=function(){
 var wh=windowHeight();
 document.getElementById("contentWrap").style.height = document.getElementById("sidebar").style.height = (wh-document.getElementById("header").offsetHeight-document.getElementById("footer").offsetHeight)+"px";
}

查看完整demo：http://www.css88.com/demo/js-zsy/js-zsy.html

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《js实现的高度自适应》