iframe 高度未填充到 50%答案

【问题标题】：Iframe height doesn't fill out to 50%iframe 高度未填充到 50%
【发布时间】：2017-06-13 08:15:08
【问题描述】：

我目前正在处理我的考试项目并正在构建一个 wordpress 主题（我已将其转换为 CodePen 的 HTML）。

它正在工作，但遗憾的是，我用于播客的所有 iframe 都卡在了设定的高度，而不是像我想要的那样填写。我尝试了很多来解决这个问题，但无法让它工作。

codepen 可在 https://codepen.io/Puffss/pen/weWPmW

主要是关于

iframe {
  background: url(img/placeholdersoundcloud.jpg);
  background-size: cover;
  width: 18%;
  height: 50%;
  float: left;
  margin: 0% 1% 0.6% 1%;
}

&lt;iframe width="640" height="400" scrolling="no" frameborder="no" src="./SpaarnestadPhoto Exposities_files/saved_resource.html"&gt;&lt;/iframe&gt;

请注意：这是作为单个网页生成的代码 wordpress，因此 iframe 中有奇怪的代码和缺少链接。

【问题讨论】：

从内联 iframe 中移除高度和宽度，给它一个类并使用 css 来调整它
我试过这个，但遗憾的是 Wordpress 自动包含内联高度和宽度，我不能要求我的客户每次发布新播客时手动删除它们
@DaisyTammer 使用 jquery 设置页面加载后 iframe 的高度 $("iframe").height("50%");
我厌倦了这样做，但遗憾的是没有给出任何结果

标签： html css wordpress iframe

【解决方案1】：

将此添加到您的 css 中

iframe{
  height:50% !important;
  width: 600px;
}

它将覆盖所有标签<iframe>的内联高度（在本例中为50%）

我还建议你检查一下为什么 WordPress 会自动设置高度和宽度，并可能尝试从源头中删除它们，因为通常使用重要这不是最佳做法https://codepen.io/NickHG/pen/BZzJKZ

【讨论】：

我尝试在主题中这样做，但遗憾的是它根本没有给出结果。而是返回到默认高度