div中iframe高度自適應問題

網頁分為上、中、下三部分，上、下高度固定中間高度自適應；中間分為左、右兩部分，左邊寬度固定，右邊寬度自適應。現在右側div是寬度和高度都是自適應，右側div里有個IFrame，想讓IFrame自適應外部div的寬度和高度？

我自己做的時候出現的問題是：當ifame的width和height設置為100%時，iframe會被擠出div，下滑到div的下面。然后我試了很多網上說的也沒有解決，然后加了個東西就不會出現那種情況了

下面為我的div的js設置

//window.onresize表示窗口觸發時間的時候執行
//兩個函數，用閉包包裹起來()()
window.onload=function(){
    (window.onresize=function(){
    //獲取可見寬度
    var width=document.documentElement.clientWidth-180;//180為左邊的div的大小
    //獲取可見高度
    var height=document.documentElement.clientHeight-80;//80為頭部的div的大小可自己修改
    
    //如果有寬度就給值，
    if(width>=0){
        document.getElementById('main').style.width=width+'px';
        
    }
    if(height>=0){
        document.getElementById('sidebar').style.height=height+'px';
        document.getElementById('main').style.height=height+'px';
    }
})()};

 

這個是css

html{
    overflow: hidden;
    /*火狐則會去除改變窗口大小時出現的白條這個bug*/
}

僅供參考，不喜勿噴。