在不同分辨率下用js获取div的高度

       对于在不同分辨率下对于div设置固定的宽高，显然是很不适合的，当页面的分辨率发生改变后，你所用的固定宽高的div就不会随着屏幕的变化而发生改变，今天就在不同屏幕分辨率下，如何利用百分比和js设置div的宽高。直接上代码：

 

html代码：这里很简单：

<div class="fr_lr" id = "div_rh">
    <div class="fr_lrt" id="div_rht">
        <a href="LoopSet.html"><img src="image/9.png"></a>
    </div>
    <div class="fr_lrb" id="div_rhb">
        <a href="upgrade.html"><img src="image/8.png"></a>
    </div>
</div>

简短的介绍一下，首先是一个大的div中有两个小的div，要求是这两个小div平分这个大的div并且这两个小的div中间的间隔是7px，如果直接用百分比给他分配高的话，就会在不同分辨率下出现的间隔不是7px；请不要着急接着往下看，

对应的css代码：

.fr_lr {
    float:left;
    width:21.7%;
    height:100%;

    background-color:#f00;

    position: relative;
}

 

.fr_lrt {
    float: top;
    width:100%;

    background-color:#0f0;

    margin-bottom:7px;

}
.fr_lrb{
    float: bottom;
    width:100%;

    background-color:#00f;  

    position: absolute;
    bottom: 0;
}
.fr_lrt img,
.fr_lrb img{
    float: left;
    width:100%;
    height:100%;
    Cursor:default;

}

如果愿意添加图片的话更好，如果懒得添加的话，其中这个的背景颜色已经充当了图片的角色，因此继续往下看

最关键的部分js代码来了：

 

<script>
    $(window).resize(function() {
        sized();
    });
    $(function(){
        sized();
    });
    function sized(){
        
        var oDiv_r = document.getElementById("div_rh");
        var oDiv_rt = document.getElementById("div_rht");
        var oDiv_rb = document.getElementById("div_rhb");
        oDiv_rt.style.height = (oDiv_r.offsetHeight - 7 ) / 2 + 'px';
        oDiv_rb.style.height = oDiv_rt.style.height;
        
    }
</script>

 

分析：以上有两点：第一：当页面的分辨率，或窗口发生改变后，掉去sized函数，在sized函数中1.获取对应的id，2.通过oDiv_r.offsetHeight 获取这个最大div的高度，3计算每个小div的高度oDiv_rt.style.height = (oDiv_r.offsetHeight - 7 ) / 2 + 'px';

                              第二：当页面进行刷新是调用sized函数。

通过以上两点就很好的解决了在不同分辨率下还刷新页面下都会得到合适的div的大小，也不会出现乱码什么的。