1

次のコードがあります。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>

<style type="text/css">
    .wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    text-align:center;
}

#header, #footer {
    width:100%;
    float:left;
}

#footer {
    position:fixed;
    bottom:0;
    z-index:999999;
}
</style>

</head>
<body>
  <div id="header">
      <div class="wrap">
           <div class="logo">
                <h1>Header</h1>
           </div>
           <div>Menu goes here</div>
      </div>
 </div>

 <iframe src="http://www.cnn.com"></iframe>

  <div id="footer">
      <div class="wrap">
           <h2>Footer</h2>
      </div>
 </div>
</body>
</html>

ヘッダーとフッターの間の残りの幅と高さをすべて取得するように iframe を設定するにはどうすればよいですか?

4

3 に答える 3

7

それを解決しました、いくつかのjavascriptが必要でした:)

実際の例:
http://simplestudio.rs/yard/framed/framed.html (オフライン)

コード：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="res/favicon.ico" />
<title>My website</title>

<style type="text/css">

#framed {

    position: relative;
    width: 100%;
    height: 100%;   

}

.wrap {
    position:relative;
    margin:0 auto;
    width:900px;
    text-align:center;
}

#header, #footer {
    width:100%;
    float:left;
}

#footer {
    position:fixed;
    bottom:0;
    z-index:999999;
}
</style>

    <script>

        var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);

        function chng_iframe_height(ifrid,hid,fid) {

            var eheight = window.innerHeight;
            var ifrobj = document.getElementById(ifrid); 
            var header = document.getElementById(hid); 
            var footer = document.getElementById(fid); 
            var header_height = getComputedStyle(header).height;
            var footer_height = getComputedStyle(footer).height;

            var reserved_height = parseInt(header_height) + parseInt(footer_height);

            ifrobj.style.height = eheight - reserved_height +"px";     

        }
    </script>

</head>
<body onload="chng_iframe_height('framed','header','footer');">
  <div id="header">
      <div class="wrap">
           <div class="logo">
                <h1>Header</h1>
           </div>
           <div>Menu goes here</div>
      </div>
 </div>

 <iframe src="http://www.cnn.com" id="framed"></iframe>

  <div id="footer">
      <div class="wrap">
           <h2>Footer</h2>
      </div>
 </div>
</body>
</html>

基本的に、ヘッダーとフッターのレンダリングされた高さを計算し、window.innerHeight を取得します。その数値から、ヘッダーとフッターの間にどれだけのピクセルが残っているかがわかるので、その値を iframe に割り当て、whoila は機能します...

また、その関数を0.5秒ごとに呼び出すようにsetintervalを設定したので、ウィンドウのサイズを変更すると、ほとんどすぐにiframeの高さが更新されます...

于 2012-10-05T20:04:25.843 に答える
1

iframe にクラスを追加するか、次のようにその場でスタイルを設定してみてください。

<iframe style="height:100%; width:100%;" src="http://www.cnn.com"></iframe>

これも試してください：

<iframe height="100%" width="100%" src="http://www.cnn.com"></iframe>

また、body タグのパディング/マージンを削除して、ヘッダーとフッターが完全に収まるようにすることを忘れないでください。

body {
    margin:0;
    padding: 0;
}

編集：

これが機能しない場合は、固定の幅と高さを追加する必要があります。

于 2012-10-05T19:52:29.173 に答える
0

.css() と $(window).height() を使用しました $(window).height() を使用するときは、doctype が html であることを確認してください

<script>
      var resize = setInterval(function(){chng_iframe_height('framed','header','footer')},500);

        function chng_iframe_height(ifrid,hid,fid) {

            var eheight = $(window).height();
            var ifrobj = document.getElementById(ifrid); 
            var header_height = $("#" + hid).css("height"); // getComputedStyle(header).height;
            var footer_height = $("#" + fid).css("height"); 

            var reserved_height = parseInt(header_height) + parseInt(footer_height);

            ifrobj.style.height = eheight - reserved_height +"px";     

        }
    </script>
于 2013-11-26T10:34:49.547 に答える