コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > div 内の iframe は width_html/css_WEB-ITnose に適応できません

div 内の iframe は width_html/css_WEB-ITnose に適応できません

WBOY
リリース： 2016-06-24 11:36:42
オリジナル
1601 人が閲覧しました

これは私のページです: 

<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 を見て、お互いから学ぶことができます
関連ラベル：
div内iframe无法自适应宽度
ソース：php.cn
前の記事：一般的な Web サイトの CSS スタイルreset_html/css_WEB-ITnose 次の記事：Web ページ要素の CSS センタリングを実装するための完全な戦略_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2057
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2211
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1865
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1750
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1776
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート