Make Iframe to fit 100% of container's remaining height
我想设计一个带有横幅和iframe的网页。我希望iframe可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以在不编写JavaScript代码的情况下完成，而只使用CSS？
我尝试在iframe上设置
更新说明：不好意思，我没有很好地描述这个问题，我尝试了css-margin，div上的padding属性，以成功地占据网页的整个回忆高度，但是这个技巧在iframe上不起作用。
1 2 3 4 | <body> Banner <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe> </body> |
任何想法都会受到赞赏。
2019更新
TL；DR：今天最好的选择是这个答案中的最后一个——flexbox。一切都很好地支持它，而且已经存在多年了。去吧，别回头看。剩下的答案是出于历史原因留下的。好的。
诀窍是要了解100%是什么。阅读CSS规范可以帮助你。好的。
长话短说——有"包含块"之类的东西——父元素是不必要的。简单地说，它是层次结构中第一个具有位置的元素：相对或位置：绝对。或者身体元素本身，如果没有其他元素的话。因此，当您说"width:100%"，它会检查"containing block"的宽度，并将元素的宽度设置为相同的大小。如果那里还有其他东西，那么您可能会得到一个比它本身大的"包含块"的内容(因此"溢出")。好的。
高度的工作原理是一样的。有一个例外。无法将高度设置为浏览器窗口的100%。最顶层的元素是body(或html)，根据它可以计算100%。不确定)元素，它的长度刚好足以包含其内容。指定高度：100%对它没有影响，因为它没有"父元素"来度量100%。窗口本身不算数。；)好的。
要使某个东西完全伸展到窗口的100%，您有两个选择：
更新：我不确定在我发布这个的时候我是否已经错了，但是现在这个已经过时了。今天，您可以在样式表中执行此操作：
我也不再建议任何人制作一个怪癖模式文档，因为它会导致比解决它们更多的头痛。每一个浏览器都有不同的怪癖模式，所以让你的页面在不同浏览器之间一致地浏览变得更困难。使用DOCTYPE。总是。最好是HTML5 One-
唯一的例外是当你必须支持像IE5之类的东西时。如果你在那里，那你就只能靠自己了。那些古老的浏览器与今天的浏览器完全不同，这里给出的一些小建议将帮助您使用它们。好的一面是，如果你在那里，你可能只需要支持一种浏览器，它就可以解决兼容性问题。好的。
祝你好运！好的。
更新2：嘿，已经很久了！6年后，新的选择出现了。我刚刚在下面的评论中进行了讨论，这里有更多的技巧可以在今天的浏览器中使用。好的。
选项1-绝对定位。当你知道第一部分的精确高度时，你会感觉很好很干净。好的。
1 2 3 4 | body, html {width: 100%; height: 100%; margin: 0; padding: 0} .first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;} .second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red } .second-row iframe {display: block; width: 100%; height: 100%; border: none;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p> Some text </p>Ok. <p> And some more text </p>Ok. <iframe src="https://jsfiddle.net/about"></iframe> |
好的。
一些注意事项-需要
选项2-表格。当你不知道第一部分的高度时就可以工作。您可以使用实际的
1 2 3 4 5 | body, html {width: 100%; height: 100%; margin: 0; padding: 0} .row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;} .first-row {display: table-row; overflow: auto; background-color: lime;} .second-row {display: table-row; height: 100%; background-color: red; overflow: hidden } .second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <p> Some text </p>Ok. <p> And some more text </p>Ok. <iframe src="https://jsfiddle.net/about"></iframe> |
好的。
一些注释——
选项3-flexbox。它们中最干净的一个，但不太支持一流的浏览器。IE10需要使用
1 2 3 4 | body, html {width: 100%; height: 100%; margin: 0; padding: 0} .row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;} .first-row {background-color: lime; } .second-row { flex-grow: 1; border: none; margin: 0; padding: 0; } |
1 2 3 4 5 6 7 8 9 10 11 12 | <p> Some text </p>Ok. <p> And some more text </p>Ok. <iframe src="https://jsfiddle.net/about" class="second-row"></iframe> |
好的。
一些注释——