使Iframe适应容器剩余高度的100％

单于浩邈

2023-03-14

问题内容：

我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它？

我尝试height:100%在iframe上进行设置，结果非常接近，但是iframe尝试填充整个页面高度，包括30pxbanner
div元素的高度，因此我得到了不必要的垂直滚动条。这不是完美的。

更新说明
：对不起，我没有很好地描述问题，我尝试使用CSS边距，DIV上的padding属性成功占据了整个页面的刷新高度，但该技巧在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>

任何想法表示赞赏。

问题答案：

2019年更新

TL; DR： 今天，最好的选择是这个答案中的最后一个-
flexbox。一切都很好地支持它，并且已经有很多年了。为此，不要回头。由于历史原因，其余答案均保留下来。

诀窍是要了解100％是什么。阅读CSS规范可以为您提供帮助。

长话短说-有一个“包含块”之类的东西-
父元素不是必需的。简而言之，这是层次结构中具有position：relative或position：absolute的第一个元素。如果没有其他内容，则为body元素本身。因此，当您说“
width：100％”时，它将检查“包含块”的宽度，并将元素的宽度设置为相同的大小。如果那里还有其他东西，那么您可能会获得比其自身大的“包含块”的内容（因此“溢出”）。

高度的工作方式相同。除了一个例外。
您无法将浏览器窗口的高度提高到100％。最上层的元素（可以计算出100％）是body（或html？不确定）元素，其拉伸范围足以容纳其内容。在其上指定height：100％将无效，因为它没有要对其进行100％测量的“父元素”。窗口本身不计算在内。;）

要使某物精确地延伸到窗口的100％，您有两种选择：

使用JavaScript
不要使用DOCTYPE。这不是一个好习惯，但是会使浏览器处于“怪癖模式”，在这种模式下，您可以对元素执行height =“ 100％”并将其扩展到窗口大小。请注意，页面的其余部分可能也必须进行更改以适应DOCTYPE的更改。

更新： 我不确定发布此消息时是否还没有错，但是现在肯定已经过时了。今天，您可以在样式表中执行此操作：html, body { height: 100% }它实际上将扩展到整个视口。即使使用DOCTYPE。min-height: 100%视您的情况而定也可能有用。

而且我 也不建议任何人再做一个怪异模式的文档
，因为它造成的麻烦比解决它们的麻烦多。每种浏览器都有不同的怪癖模式，因此要使页面在各种浏览器中保持一致看起来要困难两个数量级。使用DOCTYPE。总是。最好是HTML5one- <!DOCTYPE html>。它易于记忆，并且在所有浏览器（甚至10岁的浏览器）中都像魅力一样起作用。

唯一的例外是当您必须支持IE5之类的东西时。如果您在那里，那么无论如何您都是自己的。那些古老的浏览器与当今的浏览器完全不同，这里给出的建议很少会对您有所帮助。从好的方面来说，如果您在那里，则可能只需要支持一种浏览器即可解决兼容性问题。

祝好运！

更新2： 嘿，已经很久了！6年后，新的选择出现了。我刚刚在下面的评论中进行了讨论，这里有一些可以在当今浏览器中使用的技巧。

选项1- 绝对定位。当您知道第一部分的精确高度时，它非常干净。

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需要的容器，因为bottom: 0并right: 0没有在内部框架出于某种原因的工作。与“已替换”元素有关。但是width: 100%，height: 100%效果很好。display: block是必需的，因为inline默认情况下它是一个元素，否则空格会开始产生怪异的溢出。

选项2- 表格。当您不知道第一部分的高度时可以使用。您可以使用实际<table>标签，也可以使用精美的标签display: table。我将选择后者，因为这些天似乎很流行。

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确保该行始终包含其所有内容。否则，浮动元素有时会溢出。在height: 100%第二行确保它扩展一样，因为它可以挤压第一排的小，因为它得到。

选项3 -flexbox。其中最干净的一种，但对浏览器的支持不足。IE10
-ms-的flexbox属性需要前缀，而其他任何东西都将根本不支持它。

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是因为即使display:block在这种情况下，iframe仍然会产生某种程度的溢出。在全屏视图或代码片段编辑器中看不到它，但是小的预览窗口有一个额外的滚动条。不知道那是什么，iframe很奇怪。

使Iframe适应容器剩余高度的100％

2019年更新

相关阅读

相关文章

相关问答

相关工具

相关文档