javascript - iFrame 相对于源内容的高度，然后保持高度动态

Question

如果在其他地方已经回答了这个问题，请原谅，我找不到我的确切查询的答案，因此这篇文章。我有一个用纯 HTML 和 CSS 创建的网站，使用 Javascript 和 jQuery 来设置样式功能。但是，该网站没有用于后端的 CMS。这是一个有点简单的网站。

但是，我正在使用 PHP 脚本来运行迷你电子商务商店。店面很简单，里面有产品，还有一个简单的结账。店面没有任何页眉、页脚或其他任何内容。这个店面完全位于一个子目录中（例如/store/index.php）。

现在，我想使用 iFrame 将/store/index.php页面放入我的页面正文中/store.html，因为它具有连贯的页眉和页脚、元标记等。

当我将 iFrame 插入 html 页面时，我将宽度设为 100%，这很好，因为 html 页面和店面都是响应式的。

但是，当我使用移动设备访问该站点时 - 或者 - 当我单击具有长描述的产品时，源页面变得比 iFrame 的高度“长”，因此会出现滚动条。这是有问题的，因为页面上现在有两个滚动条，并且在使用移动设备时会变得混乱。

有没有什么方法可以让我和 iFrame 的高度是动态的，取决于它链接到的页面（源页面）的高度——不仅仅是页面加载，而是实时动态？

唯一的另一种方法是在店面构建类似的页眉和页脚，这将是一个漫长而困难的过程，因为前端和店面都是使用不同的 CSS 表等构建的。

谢谢 ：-）

标签： javascriptphpjqueryhtmlcss

Answer 1

您是否尝试在视口高度和宽度中设置 iFrame 的大小而不是百分比？考虑到百分比是父元素的大小，这将使它更具动态性width='100%'，因为 vh 和 vw 将查看视口的大小而不是元素的大小。