使iframe/form固定位置

Question

我的网站上有一个 iframe 包裹在 div。

如果我在电话亭中只输入一个字符，它不会生效，因此会出现红色警告文本。

如果我随后单击电子邮件框并按 Tab 键两次，在第二个选项卡上，表单会向左移动，这样我就再也看不到问题文本了。

如何水平固定表格使其不向左移动？

IFrame 代码：

<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

URL: http://content.workbooks.com/free-trial-workbooks-crm

Answer 1

发生这种情况是因为您选择的 iframe 宽度太小（我认为这是由于 Industry select 框造成的）。只需同时增加 div 和 iframe 宽度，偏移就会消失。

<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;">&nbsp; &nbsp; &nbsp;<iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>

Fiddle

编辑

要动态调整 iframe 高度，您可以使用此 jquery library。将 iframeResizer.contentWindow.min.js 脚本上传到您的服务器并从 iframe 页面包含它：

<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>

然后上传 iframeResizer.min.js，从包含 iframe 的 div 页面中包含它，并调用适当的函数来调整 iframe 的大小：

<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>

这应该可以解决问题。有关详细信息，请参阅上面链接的 GitHub 页面。

使iframe/form固定位置

Make iframe/form fixed position

html

javascript

css

iframe