html标签中的iframe，bootstrap我在设计的网页的时候只有150px的高度，如何根据内容自适应高度求解

Posted 2023-05-13

参考技术A 不要设置高度就行本回答被提问者采纳

Twitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度

【中文标题】Twitter bootstrap3：HTML5，非跨域 iframe 缩放宽度和高度

【英文标题】：Twitter bootstrap3: HTML5, non-cross-domain iframe scale width and height

【发布时间】：2013-08-19 20:10:56

【问题描述】：

我知道这已经被问过很多次了，但请继续阅读。

在bootstrap 3 中，我正在尝试获取一个 iframe 来填写一个 div。

我已经在互联网上进行了广泛的搜索，并尝试了我遇到的每一件事，但都没有运气。

这是独家新闻：

我需要在一个狭窄的 div ID 中加载一个 html 页面。它不是跨域的；我可以控制两者。 我需要能够为 iframe 中的内容设置样式。我可以从“主”页面（即目标页面）执行此操作，还是需要在“传入页面”（即 iframe 内容 html）中执行此操作？ iframe 必须灵活：高度和宽度（由于响应式设计而导致的宽度）需要根据内容扩展。

我很绝望，想知道 Bootstrap3 是否覆盖了某些东西？

结合下面列出的一长串 css 和 js 解决方案，我尝试了大量的 css 更改。

这是我尝试过的一堆东西（不是全部）：-S

Twitter Bootstrap iFrame usage? What's the correct way to size an iframe in a Twitter bootstrap fluid layout? http://bootply.com/search?kw=iframe Set iframe content height to auto resize dynamically Make Iframe to fit 100% of container's remaining height cross-domain iframe resizer? to fit iframe to its content height

【问题讨论】：

您说“您可以控制该域”，但它们是完全同一个域吗？甚至到协议？如果没有，你无能为力。

我会说是的。这可能在未来会有所改变，但现在它们是相同的。

【参考方案1】：

一些选项：

1：尝试使 iframe 具有响应性。 iframe 不能自动扩展，所以你必须决定一个合适的高度，或者使用 JavaScript。对于宽度，bootstrap 已经涵盖了大部分内容。您确实需要在 iframe 周围创建一个 div 来响应它。然后将 iframe 的宽度 css 设置为 100%。

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
             <h1>I'm the left column</h1>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <iframe style="width: 100%;" src="http://..." ></iframe>
        </div>
    </div>
</div>

demo

2：不要使用 iframe。如果同源，请使用$.load之类的函数。

$('#targetlocation').load('/usually_in_an_iframe.html #main_element');

3：#1 的组合和适合您链接到的高度问题的框架

【讨论】：

谢谢，我会处理这个；并作记录； Jquery 完全可以接受。

只是一个更新：我可以使用带有以下奇怪的 load()：它不能在 Chrome 本地工作，但在 FF 中工作。如果上传到服务器，它可以在 Chrome 中运行。让 iFrame 调整到宽度没有问题；高度仍然是一个主要问题。

这是一项安全功能；您无法查询带有文件 url 的文件。但是，如果您运行服务器，它将起作用。如果您使用负载，高度应该不是问题，因为没有 iframe。

是的，我收集到了。目前，我将它们视为两个独立的事物。负载工作正常，iframe 高度是一场噩梦。不过，不要放弃，我会回来报告，以防将来这对其他人有用。

更新：我让 iframe 在以下代码的帮助下调整到高度：456bereastreet.com/archive/201112/… 这将使 iframe 在 整个 页面时调整到 100% 高度负载。不过，下一个问题是，当 iframe 的 content 发生变化时，我无法进行高度调整。想象一下：iframe 加载正常。 iframe 内部是一个折叠，当我单击它以“下拉”折叠时，我得到了滚动条。 :-( 不放弃..

【参考方案2】：

Bootstrap 3.2 发布了一个方便的响应式 iframe 类：

http://getbootstrap.com/components/#responsive-embed

即：

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>