如何更改响应式 iFrame 的高度？答案

【问题标题】：How to change the height of a responsive iFrame?如何更改响应式 iFrame 的高度？
【发布时间】：2019-06-25 14:03:19
【问题描述】：

我的 iFrame 的高度太短，但如果我将其从 100% 更改，它不会更改容器，它只会更改滚动高度。

如何让我的容器更高？

这是 Bootstrap 框架，为了让 iFrame 响应，我需要一些代码，如果我改变高度，iFrame 的滚动高度就会改变。

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

请更改 iFrame 容器高度

【问题讨论】：

标签： html css twitter-bootstrap iframe responsive-design

【解决方案1】：

我认为你不能使用 (℅) 作为高度，你应该使用 min-height 和 max-height 属性和 (PX) 然后检查是否有响应！

【讨论】：

我见过几个网站 100% 使用响应式 iFrame，当我将其更改为 px 时，它会搞砸..
刚刚测试了一下，把100%变成px属性不行
我测试过了，对我来说没问题！
我测试了
google.com"></iframe>
高度:100% 和高度:500px; 你确定你的样式设置好了? 使用 !important 结束样式
我现在试试，谢谢！所以身高 100% 不会干扰？

【解决方案2】：

我设法通过在容器的高度属性上添加 !important 来找到解决方法。

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
height: 600px !important;
}

.iframe-container iframe {
   border: 0;
   height: 100%;	
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

【讨论】：