如何将Google Form iframe嵌入具有灵活高度的html css（响应式）

Posted 2023-03-06

【中文标题】如何将Google Form iframe嵌入具有灵活高度的html css（响应式）

【英文标题】：how to embed Google Form iframe in html css with flexible height (responsive)

【发布时间】：2019-11-01 22:26:52

【问题描述】：

问题是我有多页谷歌表单，每页都有不同数量的文本#。它将作为测验嵌入长篇博客文章中。问题是google只提供iframe代码，而iframe不允许我设置灵活的高度。

我已经尝试过 Ben Marshall，我在样式标题和实际 iframe 中都尝试过 height:100%，但仍然没有。

如果我给它平均高度，则需要滚动最长的文本 如果我给它最长幻灯片的高度，那么就会有一个巨大的空白。 当我没有给出高度时，iframe 真的很小，即使是最短的页面也必须滚动。

理想情况下，我想要一种在 iframe 周围使用弹性框或其他东西的方法，它会根据表单的大小改变高度。 否则有没有办法让谷歌形成 iframe 的中心 - 将额外的空间分开？ 这是一个示例谷歌表单

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf0yROc5FfPcvex7G3e1uPGXo3nmQMk99EKZypuarafcVtwhw/viewform?embedded=true" width="640" height="903" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

我只熟悉 CSS 和 html。

感谢您的时间和帮助

【参考方案1】：

浏览器中的Cross-origin security features 会阻止您在没有框架内站点的明确合作的情况下读取框架中文档的信息（包括其呈现的高度）。

所以你不能这样做。