Html iFrame 未扩展到 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1263968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iFrame not expand to 100% height
提问by HP.
I have this below html. And I would like the iFrame to cover the rest of the screen with 100% on whatever left. I tried "100%" and "*" in height attribute but not working. Why is that? Thanks
我在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%;
}
回答by
The reason height: 100% does not work is because % heights do not work on children whose parents do not have an explicit (non %) height. So this does not work:
height: 100% 不起作用的原因是因为 % heights 不适用于父母没有明确（非 %）身高的孩子。所以这不起作用：
parent {
height: 60%;
}
child {
height: 100%;
}
while this does:
虽然这样做：
parent {
height: 60em;
}
child {
height: 100%;
}
Child does not know what 60% means, so instead it becomes height: auto (height determined by static content inside it).
Child 不知道 60% 是什么意思，所以它变成了 height: auto （高度由里面的静态内容决定）。
Child does know how to figure out a % of 60em, or any other explicit unit.
孩子确实知道如何计算 60em 的 % 或任何其他明确的单位。
There are some exceptions to this rule. One is where when both the html and body elements are given height: 100%, you may use height: 100% or min-height: 100% on a direct child. (You could try height: 96% as Pat suggested but know this will be completely different values per screen/browser height. At unexpected sizes you could lose content.)
此规则有一些例外。一种是当 html 和 body 元素都被赋予 height: 100% 时，你可以在直接子元素上使用 height: 100% 或 min-height: 100% 。（您可以按照 Pat 的建议尝试 height: 96%，但要知道这将是每个屏幕/浏览器高度的完全不同的值。在意外大小时，您可能会丢失内容。）
Unless I'm misreading the HTML, it looks like you have two direct children: the iframe and #container-frame.
除非我误读了 HTML，否则看起来您有两个直接的孩子：iframe 和 #container-frame。
You could try absolutely positioning #container-frame at the top of the viewport (so it can sit above the rest of the page, and by "above" I mean "closer to the user on the z-axis"), and if the iframe isn't set to 100% high but maybe like Pat's example, 96% or something, you could then maybe give the iframe some top padding to make visual room for #container-frame. If you don't, the top of the iframe would be obscured by #container-frame and people would miss the top. Know that you can't add top or bottom margins, padding, borders, etc to a 100% high box. That would give you something more than 100%!
您可以尝试将 #container-frame 绝对定位在视口的顶部（因此它可以位于页面其余部分的上方，“上方”我的意思是“在 z 轴上更接近用户”），如果iframe 没有设置为 100% 高，但也许像 Pat 的例子，96% 或其他东西，然后你可以给 iframe 一些顶部填充，为#container-frame 腾出视觉空间。如果不这样做，iframe 的顶部将被 #container-frame 遮挡，人们会错过顶部。知道您不能向 100% 高框添加顶部或底部边距、填充、边框等。那会给你超过100%的东西！
Another exception to the % height rule is with absolutely positioned elements in general. They may have a % height as well, except IE6 has issues with this. So possibly absolutely positioning both direct children can work, if you don't mind hacking for IE6 or don't care about IE6. Generally I don't like positioning everything on a page but that might be easiest in a case like this.
% height 规则的另一个例外是一般绝对定位的元素。它们也可能有一个 % 高度，除非 IE6 有这个问题。因此，如果您不介意为 IE6 进行黑客攻击或不关心 IE6，则可能绝对定位两个直接子节点都可以工作。通常我不喜欢在页面上定位所有内容，但在这种情况下这可能是最简单的。
回答by Pat
This CSS will should do the trick for you:
这个 CSS 应该可以为你解决问题：
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
Then set the height of the iframe to 96%. This will stop it from being pushed off the bottom of the page.
然后将 iframe 的高度设置为 96%。这将阻止它被推离页面底部。
The reason you need this is because 100% height on the iframe is calculated as 100% of the available screen height. Since you've got a 35px tall div above the iframe, you end up with an iframe pushed 35px beyond the total screen height.
您需要这样做的原因是 iframe 上的 100% 高度计算为可用屏幕高度的 100%。由于您在 iframe 上方有一个 35px 高的 div，因此您最终会得到一个 iframe 超出总屏幕高度 35px。
回答by Pat
You could try simply using <object>instead of <iframe>
您可以尝试简单地使用<object>而不是<iframe>
Example:
例子：
<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>
Note that most people will recommend against using any kind of framing (using object or iframe), for security purposes.
请注意，出于安全目的，大多数人会建议不要使用任何类型的框架（使用对象或 iframe）。
Update
更新
I forgot! There may also be a way to adjust the iFrame dynamically using a javascript function that runs after the body loads. There is a very good example of it here.
我忘了！可能还有一种方法可以使用在主体加载后运行的 javascript 函数动态调整 iFrame。这里有一个很好的例子。
