html - 使 Iframe 响应高度

Question

我在 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>

只要屏幕不会变小，它就可以工作。 但是，该表单是响应式的，如果屏幕变得非常小，地址行会位于大 map 下方。使完整的表格比普通 View 高很多。 (通常它是 734px 高，在响应式设计中它是 1388px 高) 这意味着我需要一个像内容一样拉伸(stretch)的 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 在有侧边栏的网站和没有侧边栏的网站上表现不同。

Answer 1

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

<强>1。断点

地址列表在 map 下方时添加断点。您可以使用 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 方法有缺点。