允许页面特定部分的响应式 iframe - 如何？

Question

我有这段代码，我从各种来源汇总在一起，以允许嵌入页面特定部分的 iframe：

<style type="text/css">
body {background:transparent;
height:2000px;
width:870px;
}
</style>
<div style="border: 1px solid rgb(250, 0, 0); overflow: hidden; margin: 0px auto; max-width: 900px;">
<iframe scrolling="no" src="https://https://sites.google.com/site/yourcommentsite/test" style="border: 0px none; margin-left: -15px; height: 9999px; margin-top: -365px; width: 900px;">
</iframe>
</div>

这里解释了这段代码的原因：https://sites.google.com/site/yourcommentsite/

第一部分是 iframe 周围的透明度，在包含 iframe 的小工具内部（不适用于 Google 网站，除非它位于小工具中）。然后我制作了一个包含网站 iframe 的红色边框“窗口”。我调整 iframe 的大小并将其相对于“窗口”定位，并且嵌入了评论部分。此代码嵌入了一个 900px 宽和 9999px 长的 iframe。

这用于 Google 协作平台，以允许嵌入另一个 Google 站点页面的特定部分。

问题是：它不是响应式的，所以指令有点复杂，并且取决于用户的屏幕分辨率，所以尝试使用它的人会制作一个固定大小的 iframe，而其他显示器会剪切或制作 iframe小的。如果 iframe 被剪切/溢出，则会出现滚动条，但这不是最干净的解决方案。

我想让它具有响应性，但我看到的解决方案无法让它们与仅允许获取网站特定部分的“窗口”一起使用。

我对编码几乎一无所知，所以你能帮我找到解决方案吗？

此外，将 javascript 添加到 Google 协作平台非常困难，并且不允许 src="xxxx.js" 或 "xxxx.css"。

谢谢！

Answer 1

看看我在http://jsfiddle.net/7k3sscdk/ 的例子。这通过将所有内容的高度和宽度设置为 100% 来实现。但是，如果 iframe 指向的网站没有响应式，则您也无法使 iframe 内容在您的网站上响应式。

<iframe src='http://www.example.com' style='border: 0;' width='100%' height='100%' scrolling='no'></iframe>