自适应高度布局比较常用,大家知道自适应宽度可以很方便的用css布局,但是自适应高度用css虽然能解决,但是比较麻烦,还不如写一段脚本来的的轻松多了。
原理:计算屏幕的高度,减去头部和底部的高度就OK了,
[code=”javascript”]
//计算文档的可见高度
function windowHeight() {
??? var de = document.documentElement;
??? return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
//window.onresize是窗口改变大小的时候,因为窗口改变大小,文档的可见高度或宽度会变化。
window.οnlοad=window.οnresize=function(){
?var wh=windowHeight();
?document.getElementById(“contentWrap”).style.height = document.getElementById(“sidebar”).style.height = (wh-document.getElementById(“header”).offsetHeight-document.getElementById(“footer”).offsetHeight)+”px”;
}
[/code]