html – iFrame不能扩展到100%的高度

前端之家收集整理的这篇文章主要介绍了html – iFrame不能扩展到100%的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我下面有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.通常我不喜欢将页面上的所有内容都放在一个页面上,但是在这种情况下可能最简单.

原文链接:https://www.f2er.com/html/224996.html

猜你在找的HTML相关文章