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

发布时间：2020-12-14 18:51:02 所属栏目：资源来源：网络整理

导读：我下面有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"

我下面有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.通常我不喜欢将页面上的所有内容都放在一个页面上,但是在这种情况下可能最简单.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!