ブラウザのサイズが変更されても、iframeを常にウィンドウぴったりに表示したい場合、CSSだけでは難しそうでしたのでJavaScriptを使いました。
つまり、ブラウザのリサイズイベントを感知してそのたびにiframeのサイズを変更します。
サンプルページ
http://supersupers7.com/labs/iframe_resize/
ソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iframeをブラウザのウィンドウサイズと常に揃える方法</title>
</head>
<body style="margin:0px;overflow-y: hidden;overflow-x: hidden;" onresize="resizeFrame()">
<div style="height:200px;border;background-color:pink;">
<font size="20px">ここはヘッダー部分。高さ２００PX</font>
</div>
<iframe id="fm" style="width:100%;height:100%" src="http://yahoo.co.jp"></iframe>
</body>
<script type="text/javascript">
function resizeFrame(){
var tmp_height = document.documentElement.clientHeight -201;
//フレームのエレメント取得
var fm_elm = document.getElementById("fm");
fm_elm.style.height = tmp_height +"px";
}
resizeFrame();
</script>
</html>
0 件のコメント:
コメントを投稿