我下面有html.而且我希望iFrame能够覆盖剩下的100％的屏幕.我在height属性中尝试“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%;
}
解决方法
原因高度：100％不起作用是因为高度不高于父母没有明确(非％)高度的孩子.所以这不行：
parent {
height: 60%;
}
child {
height: 100%;
}
而这样做：
parent {
height: 60em;
}
child {
height: 100%;
}
孩子不知道什么60％的意思,所以相反它变成高度：自动(高度由静态内容确定).
孩子知道如何计算出60em的百分比,或任何其他明确的单位.
这个规则有一些例外.一个是当html和body元素都被赋予height：100％的时候,你可以在一个直接的孩子上使用height：100％或min-height：100％. (你可以尝试高度：96％,如Pat建议的,但知道这将是每个屏幕/浏览器高度完全不同的值.在意想不到的大小,你可能会失去内容.)
除非我误读HTML,否则看起来你有两个直接的孩子：iframe和#container-frame.
您可以尝试在视口顶部绝对定位#个容器框架(因此它可以位于页面的其余部分之上,而在“上方”之间,我的意思是“靠近z轴上的用户”),如果iframe没有设置为100％的高,但也许像Pat的例子,96％或者什么,你可以给iframe一些顶部填充,使#container-frame的视觉空间.如果没有,则iframe的顶部将被#container-frame遮挡,人们会错过顶部.知道您不能将顶部或底部的边距,填充,边框等添加到100％的高框.那会给你超过100％的东西！
％height规则的另一个例外是一般绝对定位的元素.他们也可能有一个％的高度,除了IE6有问题.所以可能绝对定位两个直接的孩子可以工作,如果你不介意黑客IE6或不关心IE6.通常我不喜欢将页面上的所有内容都放在一个页面上,但是在这种情况下可能最简单.
