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

如何解决使Iframe适应容器剩余高度的100%

2019年更新

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

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

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

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

要使某物精确地延伸到窗口的100%,您有两种选择:

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

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

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

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

祝好运!

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

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

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

表格。当您不知道第一部分的高度时可以使用。您可以使用实际<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%第二行确保它扩展一样,因为它可以挤压第一排的小,因为它得到。

-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的网页。我希望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>

任何想法表示赞赏。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?