Question

我在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%;
}

Answer 1

高度：100％不起作用的原因是因为％高度对父母没有明确（非％）身高的孩子不起作用。所以这不起作用：

parent {
  height: 60%;
}

child {
  height: 100%;
}

虽然这样做：

parent {
  height: 60em;
}

child {
  height: 100%;
}

孩子不知道60％是什么意思，所以相反它变成身高：自动（身高由其中的静态内容决定）。

孩子确实知道如何计算60em的百分比或任何其他明确的单位。

此规则有一些例外情况。一个是当html和body元素都给定高度：100％时，你可以使用高度：100％或min-height：100％直接孩子。（您可以尝试高度：96％，如Pat建议的那样，但是知道每个屏幕/浏览器高度的值会完全不同。在意想不到的尺寸下，您可能会丢失内容。）

除非我误读HTML，否则看起来你有两个直接的孩子：iframe和＃container-frame。

您可以尝试将＃container-frame绝对定位在视口的顶部（因此它可以位于页面的其余部分之上，而“上方”我的意思是“更靠近z轴上的用户”），如果iframe没有设置为100％高，但可能像Pat的例子，96％或者其他东西，那么你可以给iframe一些顶部填充，以便为＃container-frame提供可视空间。如果你不这样做，那么iframe的顶部会被＃container-frame遮挡，而人们会错过顶部。知道你不能在100％高的盒子里添加顶部或底部边距，填充，边框等。这会给你超过100％的东西！

％height规则的另一个例外是通常使用绝对定位的元素。他们也可能有％的高度，除了IE6有这个问题。因此，如果您不介意IE6的黑客攻击或不关心IE6，那么可能绝对定位两个直接孩子都可以工作。一般来说，我不喜欢在页面上定位所有内容，但在这种情况下这可能是最简单的。

Answer 2

这个CSS应该可以解决这个问题：

body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

然后将iframe的高度设置为96％。这将阻止它被推离页面底部。

您需要这个的原因是因为iframe上的100％高度计算为可用屏幕高度的100％。由于你在iframe上方有一个35像素高的div，你最终会将iframe推到超过总屏幕高度的35px。

Answer 3

您可以尝试使用<object>代替<iframe>

示例：

<object type='text/html' data="http://www.wikipedia.org/" style='width:100%; height:100%'>

请注意，出于安全考虑，大多数人会建议不要使用任何类型的框架（使用对象或iframe）。

更新

我忘了！可能还有一种方法可以使用在主体加载后运行的javascript函数动态调整iFrame。有一个很好的例子here.

iFrame不会扩展到100％的高度

3 个答案: