我有这个下面的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%;
}
height: 100% 不起作用的原因是 % height 对父母没有明确（非 %）身高的孩子不起作用。所以这不起作用：
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%。 （您可以尝试高度：96％，正如帕特建议的那样，但要知道这将是每个屏幕/浏览器高度完全不同的值。在意外的尺寸下，您可能会丢失内容。）
除非我误读了 HTML，否则看起来您有两个直接子级：iframe 和#container-frame。
您可以尝试将 #container-frame 绝对定位在视口的顶部（这样它就可以位于页面其余部分的上方，“上方”的意思是“在 z 轴上更靠近用户”），并且如果iframe 没有设置为 100% 高，但也许像 Pat 的例子一样，96% 或其他什么，然后你可以给 iframe 一些顶部填充，为 #container-frame 腾出视觉空间。如果不这样做，iframe 的顶部将被 #container-frame 遮挡，人们会错过顶部。请注意，您无法向 100% 高的框添加顶部或底部边距、填充、边框等。这会给你带来超过 100% 的东西！
% height 规则的另一个例外是一般情况下绝对定位的元素。它们也可能有 % 高度，但 IE6 对此有问题。因此，如果您不介意破解 IE6 或不关心 IE6，那么绝对定位两个直接子级可能是可行的。一般来说，我不喜欢将所有内容都放置在页面上，但在这种情况下这可能是最简单的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
