iFrame 未擴展到 100% 高度
[英]iFrame not expand to 100% height
問題描述
我在html下面有這個。 我希望 iFrame 在剩下的任何地方都 100% 覆蓋屏幕的其余部分。 我在高度屬性中嘗試了“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%;
}
3 個解決方案
解決方案1
18 已采納
height: 100% 不起作用的原因是因為 % heights 不適用於父母沒有明確（非 %）身高的孩子。 所以這不起作用：
parent {
height: 60%;
}
child {
height: 100%;
}
雖然這樣做：
parent {
height: 60em;
}
child {
height: 100%;
}
Child 不知道 60% 是什么意思，所以它變成了 height: auto （高度由里面的靜態內容決定）。
孩子確實知道如何計算 60em 的 % 或任何其他明確的單位。
此規則有一些例外。 一種是當 html 和 body 元素都被賦予 height: 100% 時，你可以在直接子元素上使用 height: 100% 或 min-height: 100% 。 （您可以按照 Pat 的建議嘗試 height: 96%，但要知道這將是每個屏幕/瀏覽器高度的完全不同的值。在意外的尺寸下，您可能會丟失內容。）
除非我誤讀了 HTML，否則看起來您有兩個直接的孩子：iframe 和 #container-frame。
您可以嘗試將 #container-frame 絕對定位在視口的頂部（因此它可以位於頁面其余部分的上方，“上方”是指“在 z 軸上更靠近用戶”），如果iframe 沒有設置為 100% 高，但可能像 Pat 的例子一樣，96% 或其他什么，然后你可以給 iframe 一些頂部填充，為#container-frame 騰出視覺空間。 如果不這樣做，iframe 的頂部將被 #container-frame 遮擋，人們會錯過頂部。 知道您不能向 100% 高框添加頂部或底部邊距、填充、邊框等。 那會給你超過100%的東西！
% height 規則的另一個例外是一般絕對定位的元素。 它們也可能有一個 % 高度，除非 IE6 有這個問題。 因此，如果您不介意為 IE6 進行黑客攻擊或不關心 IE6，則可能絕對定位兩個直接子節點都可以工作。 通常我不喜歡在頁面上定位所有內容，但在這種情況下這可能是最簡單的。
解決方案2
1 2009-08-12 03:04:20
這個 CSS 應該可以為你解決問題：
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
然后將 iframe 的高度設置為 96%。 這將阻止它被推離頁面底部。
您需要這樣做的原因是 iframe 上的 100% 高度計算為可用屏幕高度的 100%。 由於您在 iframe 上方有一個 35px 高的 div，因此您最終將 iframe 推到總屏幕高度之外 35px。
解決方案3
0
您可以嘗試簡單地使用<object>而不是<iframe>
例子：
<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>
請注意，出於安全目的，大多數人會建議不要使用任何類型的框架（使用對象或 iframe）。
更新
我忘了！ 可能還有一種方法可以使用在主體加載后運行的 javascript 函數動態調整 iFrame。 這里是它的一個很好的例子 在這里：
f = document.getElementById('childframe')
f.style.height = f.contentWindow.document.body.scrollHeight + 'px';
iframe 100％的高度無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.