ホームページ > ウェブフロントエンド > htmlチュートリアル > iframe フレームワークが異なる解像度のブラウザーにどのように適応するか_html/css_WEB-ITnose

iframe フレームワークが異なる解像度のブラウザーにどのように適応するか_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:46:17
オリジナル
1333 人が閲覧しました

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>
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート