Html 使Iframe在高度上响应

我有一个类型的“商店定位器”上 由于需求，我想把这个放在一个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>

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

另一个解决方案是受欢迎的，只要它有效：）。因为我在我的网站上显示代码，所以其他人可以复制粘贴它，如果代码保持合理的简单，这将是有益的

似乎有一个人删除了他们的评论，尽管解决方案相当不错。基本上，这就是我最后感谢他的代码：

<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{宽度：100%；高度：740px；边框：无；溢出：隐藏；}
@媒体（最大宽度：675px）{iframe{高度：1588px；}

---

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

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

你说你希望其他网站包含你的iframe，而不必编辑他们的CSS文件。您可以按如下方式执行此操作：

告诉客户机将以下CSS放入他们的

部分

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

@媒体屏幕和屏幕（最大宽度：675px）{
#iframe{
最小高度：1388px；
溢出y：滚动！重要；
}
}

然后，告诉他们将iframe放在

标记之间，以便显示iframe

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

看看这个工作：

---

希望这有帮助

在外部样式表中定义所有CSS时效果良好

iframe{
宽度：100%；
高度：734px；
边界：无；
溢出：隐藏；
}
@介质（最大宽度：675px）{
iframe{
高度：1388px
}
}

---

响应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{
宽度：100%；
高度：734px；
边界：无；
溢出：隐藏；
}
@媒体屏幕和屏幕（最大宽度：1166px）{
iframe{
宽度：100%；
高度：734px；
}
}
@媒体屏幕和屏幕（最大宽度：1024px）{
iframe{
宽度：100%；
高度：734px；
}
}
@媒体屏幕和屏幕（最大宽度：980px）{
iframe{
宽度：100%；
高度：734px；
}
}
@媒体屏幕和屏幕（最大宽度：767px）{
iframe{
宽度：100%；
高度：1388px；
}
}
@媒体屏幕和屏幕（最大宽度：599px）{
iframe{
宽度：100%；
高度：1388px；
}
}
@媒体屏幕和屏幕（最大宽度：479px）{
iframe{
宽度：100%；
高度：1388px；
}
}
@媒体屏幕和屏幕（最大宽度：374px）{
iframe{
宽度：100%；
高度：1388px；
}
}

处理这个问题有两种方法

1。断点

在地址列表位于映射下面时添加断点。您可以使用CSS媒体查询来实现这一点

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

2。Javascript

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

---

但是Javascript方法也有缺点。

@media规则应该在样式表中（CSS文件或在标记之间）。你为什么不能这样做？对于复制粘贴，包括样式标记：

@media（最大宽度：675px）{#iframe{height:1388px}

我无法将CSS样式表放在iframe的标记中。如果他们只复制iFrame的代码，他们就不会复制我自己的CSS表。所以他们不会有相同的风格。我已经编辑了我的原始文章的底部。谢谢，这在我自己的网站上非常有效。但这对其他人来说是非常困难的，因为他们很容易将其粘贴到自己的网站上。删除iframe的内联样式并在其他网站中设置iframe的css。恐怕我不完全理解您的意思。只需删除iframe代码中的内联样式style=“宽度：100%；高度：734px；边框：无；溢出：隐藏；”。然后把上面的css代码复制到你的css文件中，如果有人把这些代码放到他们的网站上，那该怎么做呢？他们的网站上没有我的CSS文件。谢谢。我认为它已经足够好了，但关键是任何人都需要能够在他们的网站上使用它。所以我需要一个代码块，有人可以复制/粘贴到自己的网站。如果我把它放在我自己的CSS文件中，它不会对别人网站上的代码产生任何影响。只要把它放在HTML的标记之间，然后：）编辑我的帖子，这样它就可以正确地用于其他网站！我想我更喜欢使用CSS，我觉得这样更安全更容易（？？）。最大的问题是它需要内联，否则复制/粘贴代码的人将不会从我自己的样式表中的CSS代码中获得任何好处。我理解，但任何人都需要能够复制/粘贴到自己的网站上。这种方法需要他们在将代码复制到他们的站点的基础上，将其添加到自己的样式表中。在这种情况下，请将其放在HTML文件中。我看到GCyrilius在您发布此内容后就这样做了。

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