iFrame沒有擴展到100％高度

我在下面有html。我希望iFrame能夠在剩下的任何剩餘部分上覆蓋100％的屏幕。我在高度屬性中嘗試過「100％」和「*」，但不工作。這是爲什麼？由於iFrame沒有擴展到100％高度

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    </head> 
    <body> 
     <div id="container-frame"> 
      <img id="if-logo" height="35" width="84" alt="Kucku" src="/Content/Images/logo.gif"/> 
      <img id="if-avatar" height="30" width="30" alt="Avatar" src="http://web.kucku.vn/Content/Images/Avatars/default_profile_bigger.png"/> 
      <a id="if-username" href="/nvthoai">nvthoai</a> 
      <div id="if-box"> 
      </div> 
      <a id="if-close" href="http://www.yahoo.com" target="_top"> </a> 
      <div id="if-link"> 
      </div> 
      <div id="if-star"> 
      </div> 
     </div> 
     <iframe id="mainFrame" frameborder="no" width="100%" title="mainFrame" framespacing="0" border="0" name="mainFrame" src="http://www.yahoo.com" style="display: block; width: 100%; float: left; height: 100%;"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      </html> 
     </iframe> 
    </body> 
</html> 



#container-frame { 
background:#E1E1E1 url(../images/if_bg.gif) repeat-x scroll 0 0; 
height:35px; 
width:100%; 
}

來源

2009-08-12 HP.

理由高度：100％不起作用是因爲「高度」不適用於父母沒有明確（非％）身高的兒童。所以這不起作用：

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

而這樣做：

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

孩子不知道什麼是60％的手段，這樣反而變得高度：自動（靜態內容裏面確定的高度）。

孩子確實知道如何找出60em的％或任何其他明確的單位。

這條規則有一些例外。一個是當html和body元素都被賦予高度：100％時，你可以在直接孩子身上使用高度：100％或者最小高度：100％。（你可以嘗試96％的高度，但是要知道這將是每個屏幕/瀏覽器高度的完全不同的值。在意想不到的尺寸下，你可能會丟失內容。）

除非我誤讀HTML，否則它看起來像你有兩個直接的孩子：iframe和＃容器框架。

你可以嘗試在視口頂部絕對放置＃容器框架（因此它可以坐在頁面的其餘部分之上，而「上方」我的意思是「在z軸上更靠近用戶」），如果iframe未設置爲100％高，但可能與Pat的示例（96％或其他）相似，則可以給iframe一些頂部填充以爲＃容器框架留出空間。如果你不這樣做，iframe的頂部會被＃容器框遮住，人們會錯過頂部。知道你不能將頂部或底部邊距，填充，邊框等添加到100％高的框中。那會給你100％以上的東西！

％height規則的另一個例外是絕對定位的元素。他們也可能有一個％高度，除了IE6有這個問題。因此，如果你不介意針對IE6或者不關心IE6，那麼可能絕對定位兩個直接的孩子都可以工作。一般來說，我不喜歡將所有內容放在頁面上，但在這種情況下可能最簡單。

來源

2009-08-12 11:54:03

這是如何解釋爲什麼寬度：100％確實有效？ – Brabbeldas 2013-02-12 07:03:39

@Brabbeldas寬度和高度表現內在不同。這只不過是我第一次猜測，但我會說瀏覽器有能力確定頁面的總寬度（通過視口限制或顯式更寬的設置），但高度將根據需要增長，因此除非明確指出，瀏覽器無法知道100％是什麼意思 – 2014-10-11 18:01:44

這個CSS應該會爲你做的伎倆：

body { 
    margin: 0; 
    padding: 0; 
    overflow-y: hidden; 
}

然後設置iframe的高度96％。這將阻止它從頁面底部推出。

您需要這個的原因是因爲iframe上的100％高度計算爲可用屏幕高度的100％。由於您的iframe上方有一個35像素高的div，因此最終的iframe將會超過屏幕總高度的35px。

來源

2009-08-12 03:04:20 Pat

我還有問題。如果你想看到它，網站就在這裏http://web.kucku.vn/u/D – 2009-08-12 06:27:31

是的，這爲我工作。我的main.html有兩個框架，navigate.html和content.html。我在CSS上面使用了main.html正文樣式，並且它工作正常。 – msinfo 2013-09-26 12:13:42

-1

你可以嘗試簡單地使用<object>代替

例子：

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

注意，大多數人會建議不要使用任何類型的取景（使用對象或iframe），用於安全目的。

更新

我忘了！可能還有一種方法可以使用在body加載後運行的javascript函數動態調整iFrame。有一個很好的例子吧here.

來源

2009-08-12 13:21:39

iFrame沒有擴展到100％高度

回答

相關問題