iFrame没有扩展到100％高度

我在下面有html。我希望iFrame能够在剩下的任何剩余部分上覆盖100％的屏幕。我在高度属性中尝试过“100％”和“*”，但不工作。这是为什么？由于iFrame没有扩展到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%; 
}

来源

2009-08-12 HP.

理由高度：100％不起作用是因为“高度”不适用于父母没有明确（非％）身高的儿童。所以这不起作用：

parent { 
    height: 60%; 
} 

child { 
    height: 100%; 
}

而这样做：

parent { 
    height: 60em; 
} 

child { 
    height: 100%; 
}

孩子不知道什么是60％的手段，这样反而变得高度：自动（静态内容里面确定的高度）。

孩子确实知道如何找出60em的％或任何其他明确的单位。

这条规则有一些例外。一个是当html和body元素都被赋予高度：100％时，你可以在直接孩子身上使用高度：100％或者最小高度：100％。（你可以尝试96％的高度，但是要知道这将是每个屏幕/浏览器高度的完全不同的值。在意想不到的尺寸下，你可能会丢失内容。）

除非我误读HTML，否则它看起来像你有两个直接的孩子：iframe和＃容器框架。

你可以尝试在视口顶部绝对放置＃容器框架（因此它可以坐在页面的其余部分之上，而“上方”我的意思是“在z轴上更靠近用户”），如果iframe未设置为100％高，但可能与Pat的示例（96％或其他）相似，则可以给iframe一些顶部填充以为＃容器框架留出空间。如果你不这样做，iframe的顶部会被＃容器框遮住，人们会错过顶部。知道你不能将顶部或底部边距，填充，边框等添加到100％高的框中。那会给你100％以上的东西！

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

来源

2009-08-12 11:54:03

这是如何解释为什么宽度：100％确实有效？ – Brabbeldas 2013-02-12 07:03:39

@Brabbeldas宽度和高度表现内在不同。这只不过是我第一次猜测，但我会说浏览器有能力确定页面的总宽度（通过视口限制或显式更宽的设置），但高度将根据需要增长，因此除非明确指出，浏览器无法知道100％是什么意思 – 2014-10-11 18:01:44

这个CSS应该会为你做的伎俩：

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

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

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

来源

2009-08-12 03:04:20 Pat

我还有问题。如果你想看到它，网站就在这里http://web.kucku.vn/u/D – 2009-08-12 06:27:31

是的，这为我工作。我的main.html有两个框架，navigate.html和content.html。我在CSS上面使用了main.html正文样式，并且它工作正常。 – msinfo 2013-09-26 12:13:42

-1

你可以尝试简单地使用<object>代替

例子：

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

注意，大多数人会建议不要使用任何类型的取景（使用对象或iframe），用于安全目的。

更新

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

来源

2009-08-12 13:21:39

iFrame没有扩展到100％高度

回答

相关问题