Question

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

目前我有：

<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的目标是在宽度低于675px时改变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

响应式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>

Answer 2

你几乎就在那里，你只需稍微调整你的媒体查询。

您说您希望其他网站包含您的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：

希望这有帮助！

Answer 3

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

＆＃13;

iframe {
  width: 100%;
  height: 734px;
  border: none;
  overflow: hidden;
}

@media (max-width:675px) {
  iframe {
    height: 1388px
  }
}

＆＃13;

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

＆＃13;

Answer 4

您有几种方法可以解决此问题。

<强> 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方法有缺点。

使Iframe在高度上响应

4 个答案: