我在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%;
}
小智 17
高度:100%不起作用的原因是因为%高度对父母没有明确(非%)身高的孩子不起作用.所以这不起作用:
parent {
height: 60%;
}
child {
height: 100%;
}
这样做:
parent {
height: 60em;
}
child {
height: 100%;
}
孩子不知道60%意味着什么,所以相反它变成高度:自动(高度由其中的静态内容决定).
孩子确实知道如何计算60em的百分比,或任何其他明确的单位.
这条规则有一些例外.一个是当html和body元素都给定高度:100%时,你可以使用高度:100%或min-height:100%直接孩子.(您可以尝试高度:按照Pat建议的96%但是知道每个屏幕/浏览器高度的值将完全不同.在意外的尺寸下,您可能会丢失内容.)
除非我误读HTML,否则看起来你有两个直接的孩子:iframe和#container-frame.
您可以尝试将#container-frame绝对定位在视口顶部(因此它可以位于页面的其余部分上方,而"上方"我的意思是"更靠近z轴上的用户"),如果iframe没有设置为100%高,但也许像Pat的例子,96%或者其他东西,你可以给iframe一些顶部填充,为#container-frame提供可视空间.如果你不这样做,那么iframe的顶部会被#container-frame遮挡,而人们会错过顶部.知道你不能在100%高的盒子里添加顶部或底部边距,填充,边框等.这会给你超过100%的东西!
%height规则的另一个例外是通常使用绝对定位的元素.他们也可能有%的高度,除了IE6有这个问题.因此,如果您不介意IE6的黑客攻击或不关心IE6,那么可能绝对定位两个直接孩子都可以工作.一般来说,我不喜欢在页面上定位所有内容,但在这种情况下这可能是最简单的.
| 归档时间： |
|
| 查看次数： |
32459 次 |
| 最近记录： |