Html 你如何给 iframe 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5272519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you give iframe 100% height
提问by code511788465541441
I'm trying
我想
<iframe height="100%" ...>
but it still doesn't resize it. When i try the height in pixles it works.
但它仍然没有调整它的大小。当我尝试以像素为单位的高度时，它会起作用。
edit: 100% seems to be working on IE but not firefox
编辑：100% 似乎在 IE 上工作，但不是在 Firefox 上
回答by dtech
You can do it with CSS:
你可以用 CSS 做到这一点：
<iframe style="position: absolute; height: 100%; border: none"></iframe>
Be aware that this will by default place it in the upper-left corner of the page, but I guess that is what you want to achieve. You can position with the left,right, topand bottomCSS properties.
请注意，默认情况下这会将其放置在页面的左上角，但我想这就是您想要实现的目标。您可以与位置left，right，top和bottomCSS属性。
回答by Wallace Sidhrée
The problem with iframes not getting 100% height is not because they're unwieldy. The problem is that for them to get 100% height they need their parents to have 100% height. If one of the iframe's parents is not 100% tall the iframe won't be able to go beyond that parent's height.
iframe 没有达到 100% 高度的问题不是因为它们笨重。问题是，为了让他们获得 100% 的身高，他们需要他们的父母拥有 100% 的身高。如果 iframe 的父级之一不是 100% 高，则 iframe 将无法超过该父级的高度。
So the best possible solution would be:
所以最好的解决方案是：
html, body, iframe { height: 100%; }
…given the iframe is directly under body. If the iframe has a parent between itself and the body, the iframe will still get the height of its parent. One must explicitly set the height of every parent to 100% as well (if that's what one wants).
...鉴于 iframe 直接位于 body 之下。如果 iframe 在自身和主体之间有一个父级，则 iframe 仍将获得其父级的高度。还必须明确地将每个父级的高度设置为 100%（如果这是一个人想要的）。
Tested in:
测试于：
Chrome 30, Firefox 24, Safari 6.0.5, Opera 16, IE 7, 8, 9 and 10
Chrome 30, Firefox 24, Safari 6.0.5, Opera 16,IE 7, 8, 9 and 10
PS: I don't mean to be picky but the solution marked as correct doesn't work on Firefox 24at the time of this writing, but worked on Chrome 30. Haven't tested on other browsers though. I came across the error on Firefoxbecause the page I was testing had very little content... It couldbe it's my meager markup or the CSSreset altering the output, but if I experienced this error I guess the accepted answer doesn't work in every situation.
PS：我并不是要挑剔，但标记为正确的解决方案Firefox 24在撰写本文时不起作用，但在Chrome 30. 不过还没有在其他浏览器上测试过。我遇到了错误，Firefox因为我正在测试的页面内容很少......这可能是我的微薄标记或CSS重置改变了输出，但如果我遇到这个错误，我想接受的答案并不适用于每个情况。
回答by Bob Bacas
The iFrame attribute does not support percent in HTML5. It only supports pixels. http://www.w3schools.com/tags/att_iframe_height.asp
iFrame 属性在 HTML5 中不支持百分比。它只支持像素。 http://www.w3schools.com/tags/att_iframe_height.asp
