欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

关于div高度自适应浏览器屏幕

shiping1 的头像

关于div高度自适应浏览器屏幕  

2013-07-25 17:15:40|  分类: 网页学习|举报|字号 订阅

 
 

1,我的JS库用到的

<script type="text/javascript">
  
window.onload=function(){
  var height = Math.max(document.documentElement.clientHeight, document.body.offsetHeight);
  document.getElementById('mainDiv').style.height=height+'px';
}
       
</script>

2,欢迎界面用到的

<script>
window.onload=function(){
 var High=document.documentElement.offsetHeight||document.body.offsetHeight;
 document.getElementById('content_bg').style.height=High-82+'px';
 document.getElementById('welcomeimg').style.height=High-82+'px';
 var aImg=document.getElementById('aImg');
 aImg.style.marginTop=(High-82-aImg.offsetHeight)/2+'px';
};
</script>
</head>
<body>
<div class="content_bg" id="content_bg">
  <div class="welcomeimg" id="welcomeimg"><img id="aImg" src="img/welcome.jpg" width="422" height="80" /></div>
</div>
</body>

上边的82是头部的一个固定高度得减去

3,jq

<script type="text/javascript">
    $(function () {

        var height = $(window).height();
      // var topHeitht = $("#header").height();
       // var topNavHeigh = $("#topNav").height();
      // var titleHeitht = $("#dv_title").height();
      // var footHeight = $("#footer").height();
        var mainDiv = $("#mainDiv").height();
        var contentHeight = height - (161);
        $("#leftbox").height(contentHeight - 8);
        if ($("#mainDiv").height() < contentHeight) {
            $("#mainDiv").height(contentHeight - 8);
        }
    });
</script>

来自 http://blog.163.com/happy_zhangxiu/blog/static/116651126201362544734677/


普通分类: