iFrame不会扩展到100％的高度 [英] iFrame not expand to 100% height
问题描述
我有下面的html。我想让iFrame用剩余的100％覆盖屏幕的其余部分。我尝试了100％和*的高度属性，但不工作。这是为什么？感谢
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 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%;
}
推荐答案
不工作是因为％高度不适用于父母没有显式（非％）高度的儿童。所以这不工作：
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:
parent {
height: 60%;
}
child {
height: 100%;
}
而这样做：
parent {
height: 60em;
}
child {
height: 100%;
}
孩子不知道60％的意思，所以改为height：auto （高度由其内部的静态内容确定）。
Child does not know what 60% means, so instead it becomes height: auto (height determined by static content inside it).
孩子知道如何计算60em的％或任何其他显式单位。
Child does know how to figure out a % of 60em, or any other explicit unit.
这个规则有一些例外。一个是当html和body元素都给定height：100％时，您可以在直接子节点上使用height：100％或min-height：100％。 （您可以尝试高度：96％，因为Pat建议，但是知道这将是每个屏幕/浏览器高度完全不同的值）。在意想不到的大小，你可能会失去内容。）
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，它看起来像你有两个直接的孩子：iframe和＃container-frame。
Unless I'm misreading the HTML, it looks like you have two direct children: the iframe and #container-frame.
您可以尝试在视口顶部绝对定位＃container-frame（因此它可以位于页面的其余部分上方，而上方在z轴上更靠近用户），如果iframe没有设置为100％高，但可能像Pat的示例，96％或什么，那么您可以给iframe一些顶部填充，使视觉空间＃container-frame。如果你不这样做，iframe的顶部将被＃container-frame遮蔽，人们会错过顶部。知道你不能添加顶部或底部边距，填充，边框等到一个100％的高框。这将给你超过100％的东西！
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%!
％height规则的另一个例外是绝对定位的元素。他们可能有％的高度，除了IE6有这个问题。所以可能绝对定位两个直接的孩子可以工作，如果你不介意黑客IE6或不关心IE6。一般来说，我不喜欢在页面上放置所有内容，但在这种情况下可能是最简单的。
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.
这篇关于iFrame不会扩展到100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
