iframe的高度設置爲100％而沒有任何結果 - 使用Firefox v14

我正在研究一個代碼，其中我已經將iframe的高度設置爲100％，但它似乎根本無法工作。我試圖從中剝離不必要的代碼來演示問題，查看代碼在這裏（介意內聯CSS）：http://jsfiddle.net/VfKqR/iframe的高度設置爲100％而沒有任何結果 - 使用Firefox v14

這裏，它是：

<!-- Start full page container --> 
<div style="min-width: 830px; width: 100%; height: 100%; float: left;"> 

<!-- Start scoop menu --> 
<div style="width: 188px; float: left;"> 

<table> 
    <thead> 
    <tr> 
     <td> 

<a href="http://rambler.ru" target="scoop" style="font-size:13px; letter-spacing: 0.7px; font-weight: bold;">Link tester</a> 

     </td> 
    </tr> 
    </thead> 
</table> 

<!-- End scoop menu --> 
</div> 

<!-- spacer between divs --> 
<div style="width: 20px; float: left;">&nbsp;</div> 

<!-- Start iframe --> 
<div style="min-width: 622px; width:74%; height: 100%; float: left;"> 

<iframe id="scoop" name="scoop" src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%"> 

<!-- End iframe --> 
</div> 

<!-- End full page container --> 
</div>

沒有，我可以這樣做似乎修復高度達到100％。我在這裏錯過了什麼？

編輯：我只是在Safari中測試它，但它工作正常，但在最新版本的Firefox（v14.0.1）中，它不起作用。

來源

2012-08-08 Henrik Petterson

你在測試什麼瀏覽器？ Chrome似乎有效。 – TheZ 2012-08-08 20:15:19

我正試圖去100％的用戶屏幕。設置爲100％時寬度的工作方式相同。我正在使用FireFox v14。 – 2012-08-08 20:15:37

如果您添加了'html，body {height：100％}'，它也會在FF中一路走下去，但是您的窗口將僅限於視口大小。 – TheZ 2012-08-08 20:19:08

更新的JAVASCRIPT

的javascript：

<script type="text/javascript"> 
var sheet = document.createElement('style') 
sheet.innerHTML = "html, body{height: 100%;}"; 
document.head.appendChild(sheet); 
</script>

HTML：

<div style="min-width: 622px; width:74%; height: 100%; float: left;">......

來源

2012-08-08 20:19:53 orhanhenrik

是否可以添加** html，body {height：100％ ;} **內聯在內部？我正在開發這個CMS不允許我編輯標題或使用樣式表（這就是爲什麼我使用內聯CSS）。 – 2012-08-08 20:23:00

不能在文檔中使用樣式標籤嗎？ '' – Roger 2012-08-08 20:26:02

不，我只能編輯過去遺憾的身體標記。我還有什麼解決方案？ – 2012-08-08 20:28:27

你可以使用這個小jQuery腳本，我只是寫來實現它：

jQuery(document).ready(function(){var height = $(window).height(); 
      $('iframe').css('height', height) 
     });

http://jsfiddle.net/VurLy/

來源

2012-08-08 20:49:38 Cyber

這是一個非常有趣的方法，解決了我的問題。但是，它似乎並不瞭解我目前窗口的高度，只有我的決議。有什麼辦法可以調整它，使它跟隨我的屏幕大小？ – 2012-08-08 20:55:32

還是讓它達到90％而不是100％？ – 2012-08-08 21:05:22

它跟隨瀏覽器窗口的大小，至少在這裏。然而，如果你想高度匹配父元素，你寧願使用這樣的東西： 'jQuery（document）.ready（function（）{var height = innerHeight（#perentelementid）; $（'iframe' ）.css（'height'，height） }）;' 但是，父元素/包裝器必須聲明高度值。 – Cyber 2012-08-08 21:21:42

結帳我的解決方案Setting iframe to take remaining space in page沒有任何JS。

您將需要清除一些float的最有可能的（因爲這些是iFrame不會縮放的原因），並且很可能需要重構您的代碼。

希望有所幫助。

來源

2012-11-21 08:38:45

iframe的高度設置爲100％而沒有任何結果 - 使用Firefox v14

回答

相關問題