如何使一個iframe佔用所有剩餘房間

我有以下代碼：如何使一個iframe佔用所有剩餘房間

<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，以便它會採取所有頁眉和頁腳之間剩餘的寬度和高度？

來源

2012-10-05 Niv

看看我的回答，我需要使用一些JavaScript，但它完美:) – Develoger

解決它，需要一些javascript :)

活生生的例子：
~~http://simplestudio.rs/yard/framed/framed.html~~（離線）

CODE：

<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>

Basicaly，我COM pute頁眉和頁腳呈現的高度，得到window.innerHeight和從那個數字我知道有多少px是在頁腳之間留下了什麼，所以我將該值分配給iframe和whoila它的作品...

此外，我已經設置setinterval每半秒調用一次這個函數，所以如果你調整窗口的大小，它幾乎可以立即更新iframe的高度......

來源

2012-10-05 20:04:25 Develoger

它工作的很好:) 我想知道，爲什麼使用setInterval？ – Niv

因爲如果僅在body onload上調用chng_iframe_height（），則根據窗口大小，只有1個適合該特定時刻的iframe高度。所以，如果因爲某種原因窗口大小發生變化，您的iframe高度將保持原樣，因此您的設計將會中斷。我清楚了嗎？ – Develoger

啊，現在我明白了:) 如果我說我不關心調整大小，它會簡化代碼嗎？ – Niv

嘗試添加類到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 { 
    margin:0; 
    padding: 0; 
}

編輯：

如果這不起作用，您必須添加固定的寬度和高度。

來源

2012-10-05 19:52:29 dark4p

嘗試兩個方法導致相同的結果：該元素確實擴展到整個寬度，但僅限於154px高度。我沒有看到爲什麼我應該添加正文的CSS代碼，是不是默認完成？ – Niv

那麼你可以嘗試和測試，只是把一些div 100％的寬度，看看它去哪裏。關於iframe：嘗試將第一個示例中的高度規則更改爲最小高度。你應該嘗試'min-height'和'position'css規則。 Google他們。 – dark4p

我使用了.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-26 10:34:49

如何使一個iframe佔用所有剩餘房間

回答

相關問題