js实现的高度自适应

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

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

[code=”javascript”]

//计算文档的可见高度

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”;
}

[/code]

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » js实现的高度自适应

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个在IE7中会出现body的垂直滚动条,该如何hack呢?

    红枫一叶7年前 (2011-12-27)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏