Html 如何更改不同屏幕尺寸的iframe的高度？

我有一个表格是iframe。 下面的代码带有一个#表示iframe是什么。 在桌面上，我需要的框架是292倍的高度，以配合设计。 在平板电脑上，它需要具有高度=“180” 关于移动高度=“292” 我已经尝试了100%的高度，并改变了固定iframe的尺寸，但iframe太短了，并且切断了表单的底部 我可以为不同的视口调整iframe的高度吗

<iframe src="#" width="100%" height="292" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>

---

创建一个名为responsive.css的文件，并将其添加到您的样式中。最好在其他css文件之后添加此文件，因为您希望这些规则优先于其他css规则

这将是responsive.css的内容

/* Style for Extra Large Screen */
@media (max-width:1199px) {
    iframe {
        height: 292px;
    }
}

/* Style for Large Screen */
@media (max-width:991px) {
    iframe {
        height: 292px;
    }
}

/* Style for Medium Screen */
@media (max-width:767px) {
    iframe {
        height: 180px;
    }
}

/* Style for Small Screen */
@media (max-width:575px) {
    iframe {
        height: /* whatever height you want for mobile */
    }
}

---

根据您的屏幕大小，您的网站将使用responsive.css的正确部分。例如，如果您使用手机，则会选择

@媒体（最大宽度：575px）

。只需在这里输入您所需的高度。

是否与

所在的页面位于同一域？

内的

高度是多少？太棒了@这是第一次。以前没有人从我的询问中得出过解决方案，这对你很好，非常感谢你的详细解释。我还想补充一点，只有当iframe在html中没有height=”“时，这才有效，因为它覆盖了responsive.css样式表中的样式。谢谢Jessica，这是真的。尽管首先使用内联css不是一个好的做法：请参见此处或此处：