使 iframe 高度响应答案

【问题标题】：Make an Iframe responsive in height使 iframe 高度响应
【发布时间】：2017-12-17 20:50:58
【问题描述】：

我在https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ 上有一种“商店定位器” 由于需求，我想将其放入 iFrame 中，以便其他网站可以在其页面上显示此表单。让他们可以轻松地将我的“商店定位器”添加到他们的网站。

目前我有：

<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

只要屏幕不小，就可以了。但是，表单是响应式的，如果屏幕变得非常小，带有地址的行就会出现在大地图的下方。使完整的表格比正常视图高很多。（通常是 734px 高，在响应式设计中是 1388px 高）这意味着我需要一个 iFrame，它可以像内容一样延伸。（如果可能的话）

如果不可能，是否可以在样式中添加这样的内容？（如果我在我的例子中使用它就不起作用，但也许我做错了？）

Style="@media (max-width:675px){iframe{height:1388px}}"

这段 CSS 的目标是在宽度低于 675 像素时更改 iFrame 的高度。

欢迎使用其他解决方案，只要它有效 :)。因为我在我的网站上显示代码，所以其他人可以复制粘贴它，如果代码保持相当简单会很有好处。

似乎有 1 人删除了他们的评论，尽管解决方案非常好。本质上，这是我感谢他最终得到的代码：

<style>#iframe {width:100%;height:740px;border:none;overflow:hidden;}
@media (max-width:675px){#iframe{height:1588px;}}
</style>
<iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ 
"frameborder="0" id="iframe" name="De Detailer-Zoeker"></iframe>

唯一的问题是这只响应浏览器屏幕的大小，而不是放置 iFrame 的容器。这意味着 iFrame 在有侧边栏和没有侧边栏的网站上的行为会有所不同。

【问题讨论】：

@media 规则应该在样式表中（CSS 文件或
我无法将 CSS 样式表放入 iFrame 的标记中。如果他们只复制 iFrame 的代码，他们不会复制我自己的 CSS 表。所以他们不会有相同的样式。
我已经编辑了原始帖子的底部。

标签： html css iframe

【解决方案1】：

当您在外部样式表中定义所有 CSS 时，它可以正常工作。

iframe {
  width: 100%;
  height: 734px;
  border: none;
  overflow: hidden;
}

@media (max-width:675px) {
  iframe {
    height: 1388px
  }
}

&lt;iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"&gt;&lt;/iframe&gt;

【讨论】：

我明白，但任何人都必须能够复制/粘贴到他们自己的网站上。这种方法需要他们将其添加到自己的样式表中，然后将代码复制到他们的站点。
在这种情况下，请将其放在 HTML 文件中的之间。
我看到 GCyrilius 在您发布此内容后就这样做了。

【解决方案2】：

响应式 iframe 代码

<style type="text/css">
    iframe {
        width:100%;
        height:734px;
        border:none;
        overflow:hidden;
    }
    @media screen and (max-width:1166px) {
        iframe {
            width:100%;
            height:734px;
        }

    }
    @media screen and (max-width:1024px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:980px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:767px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:599px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:479px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:374px) {
        iframe {
            width:100%;
            height:1388px;
        }

    }
    </style>
    <iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>

【讨论】：

谢谢，这在我自己的网站上效果很好。但这对于其他人来说是非常困难的。
这很容易。移除 iframe 的内联样式并在其他网站设置 iframe 的 css。
恐怕我不完全明白你的意思。
只删除内联样式 style="width:100%;height:734px;border:none;overflow:hidden;"在 iframe 代码中。并将上面的 css 代码复制并粘贴到您的 css 文件中
如果有人将这段代码放在他们的网站上，那将如何工作？他们的网站上没有我的 CSS 文件。

【解决方案3】：

你有几种方法来处理这个问题。

1.断点

在地址列表位于地图下方的那一刻添加一个断点。您可以使用 CSS 媒体查询来实现这一点。

@media (max-width: 675px) {
    iframe {
        height: 1388px;
    }
}

2。 Javascript

使用 Javascript 读取屏幕的宽度，然后相应地更改 iframe 的高度。

Adjust width height of iframe to fit with content in it

Make iframe automatically adjust height according to the contents without using scrollbar?

但是 Javascript 方法有缺点。

【讨论】：

我想我更喜欢使用 CSS，我觉得这样更安全、更容易 (??)。最大的问题是它需要内联，否则复制/粘贴代码的人不会从我自己的样式表中的 CSS 代码中受益。

【解决方案4】：

你快到了，你只需要稍微调整一下你的媒体查询。

您说您希望其他网站包含您的 iframe，而无需编辑其 CSS 文件。你可以这样做：

告诉客户将以下 CSS 放入他们的 <head> 部分。

<style>
  @media screen and (max-width:675px){
    #iframe{
      min-height:1388px;
      overflow-y: scroll !important;
    }
  }
</style>

然后，告诉他们将 iframe 放在他们想要显示 iframe 的 <body> 标签之间。

<iframe id="iframe" name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

看看这个工作fiddle：

希望这有帮助！

【讨论】：

谢谢。我认为它足够好用，但关键是任何人都需要能够在他们的网站上使用它。所以我需要一个代码块，有人可以将其复制/粘贴到他们自己的网站中。如果我把它放到我自己的 CSS 文件中，它不会对别人网站上的代码产生任何影响。
只需将其放在 HTML 中的
编辑了我的帖子，使其可以在其他网站上正常工作！