如何将iframe的高度设置为与其中显示的网站相同

Question

我试图用<iframe src="http://...>将一个外部网站嵌入到我的页面中，我用一个简单的CSS规则设置宽度，但我想将高度设置为iframe中显示的网站高度，我该怎么做？

显示的网站是一个电子商店，iframe显示了一个包含一些产品的页面，我希望iframe的高度随着页面的增长而增长。如果页面显示高度为2000px，则iframe高度将为2000px，如果屏幕宽度较小，页面显示高度变为3400px，则ifame高度将变为3400px，等等。

有办法做到这一点吗？

Answer 1

您也可以在iframe:的规则集上尝试此操作

height: 100% !important;

Answer 2

您可以使用CSS来实现这一点。为iframe创建规则集并添加声明：height: 100%

Answer 3

您可以使用vh单位：

height: 100vh;