使 iframe 适合容器剩余高度的 100% [英] Make Iframe to fit 100% of container's remaining height
问题描述
我想设计一个带有横幅和 iframe 的网页.我希望 iframe 可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小.有没有可能不写 JavaScript 代码，只用 CSS 来完成?
我尝试在 iframe 上设置 height:100%，结果非常接近，但 iframe 试图填充整个页面高度，包括横幅的 30px 高度div 元素，所以我得到了不必要的垂直滚动条.这并不完美.
我尝试了 CSS 边距、DIV 上的填充属性以成功占据网页的整个剩余高度，但该技巧在 iframe 上不起作用.
<div style="width:100%; height:30px; background-color:#cccccc;">横幅</div><iframe src="http://www.google.com.tw" style="width:100%; height:100%;"></iframe>2019年更新
TL;DR:今天最好的选择是这个答案中的最后一个 - flexbox.一切都很好地支持它，并且多年来一直如此.去吧，不要回头.这个答案的其余部分是由于历史原因留下的.
<小时>诀窍是了解 100% 的含义.阅读 CSS 规范可以帮到你.
长话短说 - 有诸如包含块"之类的东西 - 这不是父元素所必需的.简单地说，它是层次结构中第一个具有 position:relative 或 position:absolute 的元素.或者身体元素本身，如果没有别的.因此，当您说width: 100%"时，它会检查包含块"的宽度并将元素的宽度设置为相同的大小.如果那里还有别的东西，那么你可能会得到比它自己大的包含块"的内容(因此溢出").
高度的工作方式相同.有一个例外.您无法将高度设置为 100% 的浏览器窗口.可以计算 100% 的最顶层元素是 body(或 html?不确定)元素，它的长度刚好足以包含其内容.在其上指定 height:100% 将不起作用，因为它没有可以测量 100% 的父元素".窗口本身不算数.;)
要使某些内容完全拉伸窗口的 100%，您有两种选择:
- 使用 JavaScript
- 不要使用 DOCTYPE.这不是一个好的做法，但它会将浏览器置于怪癖模式"，您可以在其中对元素执行 height="100%" 并将它们拉伸到窗口大小.请注意，您页面的其余部分可能也必须更改以适应 DOCTYPE 更改.
更新:我不确定我在发布此内容时是否已经弄错了，但现在肯定已经过时了.今天你可以在你的样式表中这样做: html, body { height: 100% } 它实际上会延伸到你的整个视口.即使使用 DOCTYPE.min-height: 100% 也可能有用，具体取决于您的情况.
而且我也不再建议任何人制作 quirks-mode 文档，因为它比解决问题更令人头疼.每个浏览器都有不同的怪癖模式，因此让您的页面在浏览器中保持一致变得困难两个数量级.使用 DOCTYPE.总是.最好是 HTML5 - .它很容易记住，并且在所有浏览器中都具有魅力，即使是 10 年前的浏览器也是如此.
唯一的例外是当您必须支持诸如 IE5 之类的东西时.如果你在那里，那么无论如何你都是靠自己的.那些古老的浏览器与今天的浏览器完全不同，这里提供的一些建议会对您有所帮助.从好的方面来说，如果你在那里，你可能只需要支持一种浏览器，这样就解决了兼容性问题.
祝你好运！
更新 2:嘿，好久不见！6 年后，新的选择出现了.我刚刚在下面的评论中进行了讨论，这里有更多适用于当今浏览器的技巧.
选项 1 - 绝对定位.当您知道第一部分的精确高度时，它既漂亮又干净.
body, html {width: 100%;高度:100%；边距:0；填充:0}.first-row {位置:绝对；顶部:0；左:0；右:0；高度:100px；背景颜色:石灰；}.second-row {位置:绝对；顶部:100px；左:0；右:0；底部:0；背景颜色:红色 }.second-row iframe {display: block;宽度:100%；高度:100%；边框:无；}<p>一些文字</p><p>还有一些文字</p><div class="第二行"><iframe src="https://jsfiddle.net/about"></iframe>
一些注意事项 - second-row 容器是必需的，因为 bottom: 0 和 right: 0 对某些 iframe 不起作用原因.与成为被替换"元素有关.但是 width: 100% 和 height: 100% 工作得很好.display: block 是必需的，因为默认情况下它是一个 inline 元素，否则空格会开始产生奇怪的溢出.
选项 2 - 表格.当您不知道第一部分的高度时有效.您可以使用实际的 <div class="第二行"><iframe src="https://jsfiddle.net/about"></iframe> 一些注意事项 - 选项 3 - 弹性盒.其中最干净的一个，但浏览器支持不太好.IE10 将需要 <iframe src="https://jsfiddle.net/about" class="second-row"></iframe> 一些注意事项 - 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 to set I tried CSS margin, padding attribute on DIV to occupy the whole remaining height of a web page successfully, but the trick didn't work on iframe.
TL;DR: Today the best option is the last one in this answer - flexbox. Everything supports it nicely and has for years. Go for that and don't look back. The rest of this answer is left for historical reasons. 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. To make something stretch exactly 100% of the window, you have two choices: 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: 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 - 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! Update 2: Hey, it's been a long time! 6 years later, new options are on the scene. I just had a discussion in the comments below, here are more tricks for you that work in today's browsers. Option 1 - absolute positioning. Nice and clean for when you know the precise height of the first part.
Some notes - the Option 2 - tables. Works when you don't know the height of the first part. You can use either actual
Some notes - the Option 3 - flexbox. The cleanest one of them all, but with a less than stellar browser support. IE10 will need
Some notes - the 这篇关于使 iframe 适合容器剩余高度的 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ 标签，也可以使用
display: table 以奇特的方式来实现.我会选择后者，因为它现在似乎很流行.body, html {width: 100%;高度:100%；边距:0；填充:0}.row-container {显示:表格；空单元格:显示；边框折叠:折叠；宽度:100%；高度:100%；}.first-row {显示:表格行；溢出:自动；背景颜色:石灰；}.second-row {display: table-row;高度:100%；背景颜色:红色；溢出:隐藏 }.second-row iframe {width: 100%;高度:100%；边界:无；边距:0；填充:0；显示:块；}overflow: auto 确保该行始终包含其所有内容.否则浮动元素有时会溢出.第二行的 height: 100% 确保它尽可能地扩展，尽可能地挤压第一行.-ms- 前缀用于 flexbox 属性，否则将根本不支持它.body, html {width: 100%;高度:100%；边距:0；填充:0}.row-container {display: flex;宽度:100%；高度:100%；弹性方向:列；背景颜色:蓝色；溢出:隐藏；}.first-row {background-color: 石灰;}.second-row { flex-grow: 1;边界:无；边距:0；填充:0；}overflow: hidden 是因为在这种情况下，即使使用 display: block，iframe 仍然会产生某种溢出.它在全屏视图或代码段编辑器中不可见，但小预览窗口有一个额外的滚动条.不知道那是什么，iframe 很奇怪.height:100% on iframe, the result is quite close but the iframe tried to fill the whole page height, including the 30px height of banner div element, so I got unnecessary vertical scrollbar. It's not perfect. <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>Update in 2019
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. ;)
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.<!DOCTYPE html>. It's easy to remember and works like a charm in all browsers, even the 10 years old ones.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;}<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>second-row container is needed because bottom: 0 and right: 0 doesn't work on iframes for some reason. Something to do with in being a "replaced" element. But width: 100% and height: 100% works just fine. display: block is needed because it's an inline element by default and whitespace starts creating weird overflows otherwise.<table> tags or do it the fancy way with display: table. I'll go for the latter because it seems to be in fashion these days.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;}<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>overflow: auto makes sure that the row always includes all of its contents. Otherwise floating elements can sometimes overflow. The height: 100% on the second row makes sure it expands as much as it can squeezing the first row as small as it gets.-ms- prefixes for the flexbox properties, and anything less will not support it at all.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; }<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>overflow: hidden is because the iframe still generates some sort of overflow even with display: block in this case. It isn't visible in the fullscreen view or the snippet editor, but the small preview window gets an extra scrollbar. No idea what that is, iframes are weird.
登录
关闭
