如何为不同屏幕尺寸调整iframe高度？表单适配问题咨询

当然可以！针对不同设备视口调整iframe高度，最可靠的方式是借助CSS媒体查询，要么直接给iframe设置对应高度，要么结合容器来控制（得确保iframe能正确继承容器高度，解决你之前遇到的截断问题）。我给你两种可行的方案：

方案一：直接用媒体查询设置iframe高度 #

这种方式最直接，绕开容器继承的坑，直接针对iframe本身定义不同视口下的高度：

首先给iframe加个ID方便选择：

<iframe src="#" width="100%" height="292" type="text/html" frameborder="0" id="responsive-form-iframe"></iframe>

然后添加CSS媒体查询：

/* 默认（桌面端）高度 */
#responsive-form-iframe {
  height: 292px;
  border: none; /* 可选：去掉默认边框 */
}

/* 平板端（示例断点：屏幕宽度1023px及以下，481px及以上） */
@media (max-width: 1023px) and (min-width: 481px) {
  #responsive-form-iframe {
    height: 180px;
  }
}

/* 移动端（示例断点：屏幕宽度480px及以下） */
@media (max-width: 480px) {
  #responsive-form-iframe {
    height: 292px;
  }
}

你可以根据实际设计需求调整媒体查询的断点（比如很多设计用768px作为平板竖屏的断点，把max-width:1023px改成max-width:768px即可）。

方案二：容器包裹+媒体查询（解决高度截断问题） #

如果你更倾向用容器控制尺寸，那要注意移除iframe标签上的height属性，让它完全继承容器的高度，避免默认高度干扰：

HTML结构：

<div class="iframe-container">
  <iframe src="#" width="100%" type="text/html" frameborder="0"></iframe>
</div>

对应的CSS：

.iframe-container {
  width: 100%;
  /* 默认桌面端高度 */
  height: 292px;
}

.iframe-container iframe {
  width: 100%;
  height: 100%; /* 完全继承容器高度 */
  border: none;
}

/* 平板端 */
@media (max-width: 1023px) and (min-width: 481px) {
  .iframe-container {
    height: 180px;
  }
}

/* 移动端 */
@media (max-width: 480px) {
  .iframe-container {
    height: 292px;
  }
}

额外注意点 #

如果发现表单内容还是被截断，可能是表单本身在小视口下有溢出内容。这种情况下，你可以给iframe添加overflow: auto来显示滚动条（根据设计需求选择是否启用）：

#responsive-form-iframe, .iframe-container iframe {
  overflow: auto;
}

内容的提问来源于stack exchange，提问作者DumbDevGirl42069