ホームページ >ウェブフロントエンド >htmlチュートリアル >iframe フレームワークが異なる解像度のブラウザーにどのように適応するか_html/css_WEB-ITnose
asp.net の背景管理は iframe でできていますが、ワイドスクリーンとナロースクリーンの表示があまり良くありません。
ナロースクリーンでは正常に表示されますが、右側に空白があります。ワイドスクリーンでは非常に一貫性がありません
以下は HTML コードです:
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td colspan="4" id="top" height="81px" ><iframe height="81px" width="100%" border="0" scrolling="no" frameborder="0" src="top.aspx" name="topFrame" id="topFrame"></iframe></td></tr><tr><%--<td width="8px" background="images/main_29.gif"></td>--%><td width="195px" height="660px" valign="top" id="left"><iframe height="100%" width="100%" frameborder="0" src="Left.aspx" name="leftFrame" id="leftFrame"></iframe></td><td width="11px" background="images/main_27.gif"><img alt="隐藏菜单" src="../image/main_30.gif" onclick="return closeunit_onclick()" id="closeunit"/></td><td valign="top" class="style1" height="680px"><iframe width="100%" height="100%" frameborder="0" src="AdminHome.aspx" name="rightFrame" id="rightFrame" scrolling="auto" ><!--onload="iFrameHeight()"--></iframe></td><td width="7px" background="images/main_32.gif"></td></tr><%--<tr><td colspan="4" height="67px" ><iframe scrolling="no" height="100%" width="100%" border="0" frameborder="0" src="down.aspx" name="bottomFrame" id="bottomFrame"></iframe></td></tr>--%></table>
幅の動的計算
クラスはメニュー ナビゲーションに最大幅を与えます。論理的に言えば、ナビゲーション メニューに固定値を指定しても通常は空白に表示されない場合は、他のスタイルに問題がある可能性があります。
右側の ifram の幅を動的に調整できないことがわかりました。オンラインでいくつかのコードを見つけましたが、うまくいきませんでした。問題は解決されました。
HTML コードは次のとおりです。自動に設定するには、幅と高さに注意してください。
<script type="text/javascript"> window.onload = function() { var a = document.body.clientWidth - 195; //取得iframe框架的实际宽度// alert(a); //弹出数值测试 //document.getElementById("rightFrame").style.width = a + "px"; document.getElementById("rightFrame").style.width = a + "px"; }</script>
<iframe scrolling="auto" name="rightFrame" src="AdminHome.aspx" frameborder="0" height="100%" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>556?fdh:556)" width="100%"></iframe>