設置iframe高度自適應屏幕高度

寫在前面：

　　最近在搭建項目前台頁面框子的時候，把iframe設置成了固定的高度，導致不同的電腦尺寸訪問的時候，高度差異較大，故查了下，將iframe設置成自動適應屏幕高度的方式，這里記錄下。

　　還是直接上代碼吧

 <%--iframe頁面內容--%>
    <div class="page-content" style="">
        <iframe id="iframe_0" src="login.jsp" width="100%" height="100%" onload="changeFrameHeight(this)" scrolling="yes" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes">
        </iframe>
    </div>

　　黃色標記的代碼部分就是主要的。首先將iframe的高度設置成100%，然后在iframe加載后自動調用js函數去改變自己的高度，以適應不同的屏幕

　　js方法：

function changeFrameHeight(that){
        //電腦屏幕高度-iframe上面其他組件的高度
        //例:我這里iframe上面還有其他一些div組件，一共的高度是120，則減去120
        $(that).height(document.documentElement.clientHeight - 120);
        
    }

　給個圖可能看的比較直觀點，主要就是減去多余的高度就可以了