html - 使 iframe 适合容器剩余高度的 100%-6ren

html - 使 iframe 适合容器剩余高度的 100%

转载作者：IT老高更新时间：2023-10-28 11:03:57

我想设计一个带有横幅和 iframe 的网页。我希望 iframe 可以填充所有剩余的页面高度，并在浏览器调整大小时自动调整大小。是否可以不编写 JavaScript 代码而仅使用 CSS 来完成它？
我试图设置 height:100%在 iframe 上，结果非常接近，但 iframe 试图填充整个页面高度，包括 30px横幅 div 元素的高度，所以我得到了不必要的垂直滚动条。这并不完美。
我尝试了 CSS 边距、DIV 上的填充属性以成功占据网页的整个剩余高度，但该技巧在 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;博士:今天最好的选择是这个答案中的最后一个 - flexbox。一切都很好地支持它，并且多年来一直如此。去吧，不要回头。这个答案的其余部分是由于历史原因而留下的。

诀窍是了解 100% 是什么。阅读 CSS 规范可以帮助你。

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

高度的工作方式相同。除了一个异常(exception)。您无法将高度设置为浏览器窗口的 100%。可以计算 100% 的最顶层元素是 body(或 html？不确定)元素，它的长度刚好足以包含其内容。指定 height:100% 不会有任何效果，因为它没有“父元素”来衡量 100%。窗口本身不算数。 ;)

要使某些内容完全拉伸(stretch)窗口的 100%，您有两种选择:

使用 JavaScript

不要使用 DOCTYPE。这不是一个好的做法，但它会将浏览器置于“怪癖模式”，您可以在其中对元素执行 height="100%"并将它们拉伸(stretch)到窗口大小。请注意，页面的其余部分可能也必须更改以适应 DOCTYPE 更改。

更新:我不确定当我发布这个时我是否已经错了，但这现在肯定已经过时了。今天你可以在你的样式表中做到这一点: html, body { height: 100% }它实际上会延伸到整个视口(viewport)。即使使用 DOCTYPE。 min-height: 100%也可能有用，具体取决于您的情况。

而我 不建议任何人制作 quirks-mode 文档 也不再如此，因为它引起的头痛比解决它们的要多。每个浏览器都有不同的怪癖模式，因此让您的页面在浏览器中保持一致变得困难两个数量级。使用 DOCTYPE。总是。最好是 HTML5 之一 - <!DOCTYPE html> .它很容易记住，并且在所有浏览器中都具有魅力，即使是 10 年前的浏览器也是如此。

唯一的异常(exception)是当您必须支持 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由于某种原因在 iframe 上不起作用。与成为“被替换”元素有关。但是 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确保该行始终包含其所有内容。否则 float 元素有时会溢出。 height: 100%在第二行确保它尽可能地扩展，尽可能地挤压第一行。

选项 3 - flex 盒。其中最干净的一个，但浏览器支持不太好。 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 仍然会产生某种溢出。在这种情况下。它在全屏 View 或代码段编辑器中不可见，但小预览窗口有一个额外的滚动条。不知道那是什么，iframe 很奇怪。

关于html - 使 iframe 适合容器剩余高度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/325273/

文章推荐： ubuntu - 为什么我不能启动mongodb

文章推荐： javascript - 为什么 (0 < 5 < 3) 返回 true？

文章推荐： java - TransactionRequiredException 执行更新/删除查询

文章推荐： javascript - 使用 'var' 声明变量是可选的吗？

mysql - SQL - 剩余/不属于
我正在运行一个带有 while 约束的 SQL 查询，其中包含一些“id”。例如: SELECT table.id FROM TableOne table WHERE table.id IN (1,
Python:在一行中优雅地打印列表中的所有*剩余*元素
我正在寻找在替换其中一个元素后打印元素列表的最正确方法。我可以按如下方式做，但显然很困惑。 #!/usr/bin/python import sys file = open(sys.argv[1])
HTML 不是 100% 剩余
这个问题在这里已经有了答案: How wide is the default `` margin? (4 个答案) How do I remove the top margin in a web
ubuntu - curl:(18)传输关闭，剩余 804285 个字节要读取
当我尝试使用命令安装 rvm 时::(I am Using UBUNTU 12.04 LTS) curl -L https://get.rvm.io | bash -s 当我尝试与简单用户相同的命令时
ubuntu - curl:(18)传输关闭，剩余 2 个字节要读取
我使用 GOPro 工作人员 6 个月前发送给我的命令，通过终端(在 Gopro 网络上)使用 Gopro Hero3 拍摄照片/视频。有效。但是，在过去的一个月里，我一直在尝试再次执行此操作，并且不
android - 所有 Activity 已关闭，剩余 5 个线程
尽管知道我不应该关闭应用程序按钮，但我仍然这样做。完成所有 Activity 后，我调用 finish() 方法，它们调用析构函数和所有内容。用户的行为也是正确的。但我想知道为什么还有 5 个打开的线
java - 使用组时 Spring Boot 2 剩余 validator 调用两次
当我在 Rest Controller 中的类级别启用 @Validated spring 注释时，会生成 2 个验证上下文(每个验证上下文都有不同的前缀)。 @Validated 注释是必需的，因为
instagram-api - 您如何查看您当前的 Instagram 剩余 API 调用(速率)限制？
在旧的 API 中，剩余的允许容量显然作为 X-Ratelimit-Remaining 返回HTTP header 。然而，current version's documentation对此一无所获
azure-service-fabric - Azure Service Fabric - 部署失败，剩余 1 个分区
我一直在使用 Service Fabric 一段时间，成功构建、部署和测试了多个服务，但我刚刚完成构建的服务在部署时失败(请参阅下面的错误)。在诊断中，我尝试使用 VS 模板(没有代码更改)创建和部署
android - 如何覆盖进度条进度消息，即 61/100 到自定义消息，因为 100 剩余 0
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Progress unit in ProgressDialog 如何覆盖进度条进度消息，即 61/100 到
objective-c - 在 Objective C 中解析此字符串 : 60. 56MB/237.03MB 1526kbps 25.5%，剩余 00:15:47
我正在用 Objective-C (Cocoa) 编写命令行实用程序的前端。我需要解析输出以检查不同类型的消息。有两种基本类型；信息消息和下载状态消息。信息消息始终以以下内容之一开头:INFO:、WA

IT老高

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 使 iframe 适合容器剩余高度的 100%