對於在不同解析度下對於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的大小，也不會出現亂碼什麼的。