使Iframe适合容器剩余高度的100％ [英] Make Iframe to fit 100% of container's remaining height
问题描述
我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。
我试过set height：100％对iframe，结果是相当接近，但iframe试图填充整个页面的高度，包括 30px 高度的横幅div元素，所以我有不必要的垂直滚动条。这不是完美的。
更新注释：对不起，我没有描述问题，我试图CSS margin，padding属性DIV占据整个remining高度一个网页成功，但窍门在iframe上无效。
< body> < div style =width：100％; height：30px; background-color：#cccccc;> Banner< / div> < iframe src =http：//www.google.com.twstyle =width：100％; height：100％;>< / iframe>< / body>$>解决方案诀窍是要了解100％是什么。阅读CSS规范可以帮助你。
为了使一个长的故事短 - 有一个东西像包含块 - 这是不必要的父元素。简单地说，它是层次结构中第一个具有位置：相对或位置：绝对的元素。或者body元素本身，如果没有别的。所以，当你说width：100％时，它检查包含块的宽度，并将元素的宽度设置为相同的大小。如果有其他的东西，你可能会得到一个包含块的内容大于自己（因此溢出）。
高度工作方式相同。
有一个例外。您无法获得浏览器窗口的100％的高度。可以计算100％的最顶层元素是body（或html？not sure）元素，并且其伸展足以包含其内容。指定高度：100％对它没有影响，因为它没有父元素，衡量100％。窗口本身不计数。 ;）
要使窗口完全伸展100％，您有两个选择：
- 使用JavaScript
- 不要使用DOCTYPE。这不是一个好的做法，但它把浏览器在怪异模式，其中你可以对元素做height =100％，它会拉伸到窗口大小。请注意，您的其他网页可能需要更改，以适应DOCTYPE更改。
更新：我不知道我是不是已经错了，当我发布这个，但这当然是过时的现在。今天你可以在你的样式表中做到这一点：
html，body {height：100％}，它实际上会扩展到整个视口。即使使用DOCTYPE。min-height：100％也可能有用，这取决于您的情况。
不建议任何人制作怪癖模式文档，因为它导致更多的头痛而不是解决它们。每个浏览器都有不同的怪癖模式，所以让你的页面跨浏览器一致地看起来变得更困难两个数量级。使用DOCTYPE。总是。最好是HTML5 one -
<！DOCTYPE html>。
唯一的例外是当你需要支持IE5或其他东西时。如果你在那里，那么你自己反正。那些古老的浏览器和今天的浏览器没什么两样，这里给出的建议很少帮助你。在明亮的一面，如果你在那里，你可能只需要支持一种浏览器，这摆脱了兼容性问题。
祝你好运！ p>
I want to design a web page with a banner and an iframe. I hope the iframe can fill all the remaining page height and be resized automatically as the browser is resizing. Is it possible to get it done without writing Javascript code, only with CSS?
I tried set
height:100%on iframe, the result is quite close but the iframe tried to fill the whole page height, including the30pxheight of banner div element, so I got unneccessary vertical scrollbar. It's not perfect.Update Notes: Excuse me for not describing the question well, I tried CSS margin, padding attribute on DIV to occupy the whole remining height of a web page successfully, but the trick didn't work on iframe.
<body> <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div> <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe> </body>
Any idea is appreciated.
解决方案The trick is to understand what the 100% is taken of. Reading CSS specs can help you there.
To make a long story short - there is such a thing as "containing block" - which is not necessary the parent element. Simply said, it is the first element up the hierarchy that has position:relative or position:absolute. Or the body element itself if there is nothing else. So, when you say "width: 100%", it checks the width of the "containing block" and sets the width of your element to the same size. If there was something else there, then you might get contents of a "containing block" that are larger than itself (thus "overflowing").
Height works the same way.
With one exception. You can't get height to 100% of the browser window. The very top level element, against which 100% can be calculated, is the body (or html? not sure) element, and that stretches just enough to contain its contents. Specifying height:100% on it will have no effect, because it has no "parent element" against which to measure 100%. Window itself doesn't count. ;)To make something stretch exactly 100% of the window, you have two choices:
- Use JavaScript
- Don't use DOCTYPE. This is not a good practice, but it puts the browsers in "quirks mode", in which you can do height="100%" on elements and it will stretch them to the window size. Do note, that the rest of your page will probably have to be changed too to accommodate for the DOCTYPE changes.
Update: I'm not sure if I wasn't wrong already when I posted this, but this certainly is outdated now. Today you can do this in your stylesheet:
html, body { height: 100% }and it will actually stretch to the whole of your viewport. Even with a DOCTYPE.min-height: 100%could also be useful, depending on your situation.And I wouldn't advise anyone to make a quirks-mode document anymore either, because it causes way more headaches than solves them. Every browser has a different quirks-mode, so getting your page to look consistently across browsers becomes two orders of magnitude more difficult. Use a DOCTYPE. Always. Preferably the HTML5 one -
<!DOCTYPE html>. It's easy to remember and works like a charm in all browsers, even the 10 years old ones.The only exception is when you have to support something like IE5 or something. If you're there, then you're on your own anyway. Those ancient browsers are nothing like the browsers today, and little advice that is given here will help you with them. On the bright side, if you're there, you probably just have to support ONE kind of browser, which gets rid of the compatibility problems.
Good luck!
这篇关于使Iframe适合容器剩余高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
