如何用JavaScript实现指定div的高度随不同的显示分辨率改变

我想要实现的一个效果是根据分辨率显示的不同而改变指定div的高度，自适应显示分辨率。比方说：
 <div class="top"></div>
<div class="main" id="main"></div>
<div class="footer"></div> 上面这段代码的top样式高度是56px;
footer样式高度是33px;我需要的是这个id为main的div的高度随显示分辨率不同而自动调整高度值，大体的思路是用获取的高度减去89px，然后将这个值赋给id为main的height，可写了好几种都不行，麻烦大家帮忙解决一下这个问题！急啊~~~~~

解决方案 »

  1.   

    把这3个DIV套在TABLE里面应该比较方便些
      

  2.   

    建议使用页面大小 来做<script type="text/javascript">
    var _body = document.compatMode == 'BackCompat' ? document.body : document.documentElement ;alert(_body.clientWidth);
    alert(_body.clientHeight);</script>
      

  3.   

    直接赋值的话高度就固定了，我需要的是高度随着不同分辨率而改变！
    比方说别个用22寸和17寸和19寸的显示器看这个页面的话，top和footer都能在浏览器的上面和下面，所以这个main的高度要随着分辨率的不同而动态赋值的！
      

  4.   


    alert(screen.availWidth);
    alert(screen.availHeight);
      

  5.   

    给你提供一个思路，你不继续写？？？？
     <div class="top"></div>
    <div class="main" id="main"></div>
    <div class="footer"></div> 
    some html 
    写在html 的最后
    <script type="text/javascript">
    var _body = document.compatMode == 'BackCompat' ? document.body : document.documentElement ;document.getElementById('main').style.height = _body.clientHeight - 89 + 'px';</script>
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <style>
    .top {background-color:red;height:56px;}
    .main {background-color:green;}
    .footer {background-color:red;height:33px;}
    </style>
    <script>
    window.onload = changeMainSize;
    window.onresize = changeMainSize;
    function changeMainSize(){
    var mainDiv = document.getElementById("main");
    mainDiv.style.height = document.body.offsetHeight - 56 - 33 + "px";
    }
    </script>
    </head><body style="margin:0">
    <div class="top"></div>
    <div class="main" id="main"></div>
    <div class="footer"></div>
    </body></html>
      

  7.   

    8楼的朋友，你的方法我试了，貌似不管用，不过还是谢谢你！
    vvviop，你的方法我用了，还可以，虽然不是即时变化，但用上了！谢谢！
      

  8.   

    恩，的确用错了，FF下不支持了,这个应该可以了，实时的
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>test</title>
    <style>
    .top {background-color:red;height:56px;}
    .main {background-color:green;}
    .footer {background-color:red;height:33px;}
    </style>
    <script>
    window.onload = changeMainSize;
    window.onresize = changeMainSize;
    function changeMainSize(){
    var mainDiv = document.getElementById("main");
    mainDiv.style.height = document.body.clientHeight - 56 - 33 + "px";
    }
    </script>
    </head><body style="margin:0">
    <div class="top"></div>
    <div class="main" id="main"></div>
    <div class="footer"></div>
    </body></html>