ホームページ >ウェブフロントエンド >htmlチュートリアル >div 内の iframe は width_html/css_WEB-ITnose に適応できません
div 内の iframe は width_html/css_WEB-ITnose に適応できません
- WBOYオリジナル
- 2016-06-24 11:36:421622ブラウズ
これは私のページです:
<body style="height:100%width:100%;overflow:hidden;" onLoad="onload();"><div style="margin:0;padding:0;border:0px;height:100%;width:100%;position:absolute;"> <div class="top"> <div class="logo"></div> <div class="top_right"><a href="">首页</a> | <a href="">帮助</a> | <a href="javascript:;">退出</a></div> </div> <div id="menu" style=" border:0px;padding:0; margin-top:-1px;width:75px;height:100%;float:left;"> <div class="left_1" style="margin:0px; padding:0px; border:0px; height:100%"> <ul> <li id="li1"><img id="pgjl" src="images/pgjl_green.png" width="72" height="81" onclick="menuclick(1);" style="cursor:pointer;"/></li> <li id="li2"><img id="pgy" src="images/pgy.png" width="72" height="81" onclick="menuclick(2);" style="cursor:pointer;"/></li> <li id="li3"><img id="tjfx" src="images/tjfx.png" width="72" height="81" onclick="menuclick(3);" style="cursor:pointer;"/></li> <li id="li4"><img id="kh" src="images/kh.png" width="72" height="81" onclick="menuclick(4);" style="cursor:pointer;"/></li> <li id="li5"><img id="xtgl" src="images/xtgl.png" width="72" height="81" onclick="menuclick(5);" style="cursor:pointer;"/></li> </ul> </div> </div> <div id="left" style=" border-left:0px;margin-left:-2px;margin-top:-1px;padding:0;height:100%;width:214px;position:relative;float:left;border:1px solid #CCC;"> <iframe style="" id="LeftFrame" name="LeftFrame" width="100%" height="100%" src="page/jk/menu.html" frameborder="0"scrolling="no" noresize="noresize"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。 </iframe> </div> <div id="image" style="float:left;position:relative;border:0px"> <img src="images/right.png" id="img_menu" title="关闭左栏" style="position:absolute;margin-top:100px;float:left;cursor:pointer;"/> </div> <div id="centerdiv" style="height:100%;width:80%;overflow:auto;border:0px;float:left;overflow:hidden; position:relative"> <iframe id="frameMap" name="frameMap" height="100%" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="" style="float:left; position:relative;"></iframe> </div></div></body>
図 1
図 2
ID「frameMap」を持つ下部の iframe は幅に適応できません。外部 div の幅が 100% に指定されている場合、次の iframe が表示されます。ここにはいないような。
左側の div を非表示にした後、iframe が左側に移動するだけで、幅が適応しません。アドバイスを求める
ディスカッション（解決策）に返信する
iframe の幅を調整したい場合は、JS を使用するのが最適です
iframe の幅を調整したい場合は、JS を使用するのが最適です
jsのやり方は？幅を固定しないと iframe は表示されません。幅を固定した後は拡張できません。また、ブラウザを変更すると表示されません。 iframe の幅を適応させたい場合は、それが可能です。 JSを使用するのが最善です
jsでそれを行うにはどうすればよいですか?幅が固定されていないと iframe は表示されません。 幅を固定した後は引き伸ばすこともできません。
フレームの iframe の ID を前提として、jquery メソッドを使用します。 theFrame
function setSize(){ $('#theFrame').css("width",$(window).width());
}
//ページロード時のフレーム幅を設定します
$ (document).ready(function (){
setSize();
});
//ウィンドウサイズを手動でドラッグする場合、フレーム幅をリセットします
$(window).resize(function () {
setSize() ;
});
私の http://www.coding99.com/fe/show_48.html を見て、お互いから学ぶことができます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。