CSS高度：无法增加父类的高度？

Question

在我面前有一个有趣的问题。我有

<div class="box-content">
    <p style="height: inherit; width: inherit;">
        <iframe width="100%" height=" 100%" src="http://localhost/imagebase/image/data/banner/swf/Comp1.swf"></iframe>
    </p>
</div>

我还需要使此代码移动兼容。我所看到的是，如果我确定p的大小，那么它在移动设备上的表现与我们所知道的相同。但是在inherit的情况下，它需要其父div的宽度，这是移动兼容的。

但我无法达到全高，因为它没有那个高度。默认为185px，我需要宽300px来显示我的swf文件。

是否有任何方法可以按照此p和iframe的建议在JavaScrip或jQuery中自动更改此box-content类高度。

我不能直接改变这个类的高度，因为它在许多地方使用。

Answer 1

修改

正如Brett建议的那样，如果你因为什么原因无法改变html，那么这条css规则就可以解决问题：

.box-content p {
    min-height: 300px;
}

但是，下面的示例显示了它/它应该是什么样子。

我还将内联样式移动到了css规则，这使得以后更容易更改行为，而最合适的标记作为容器将是div，而不是p。

.swf-container {
  height: 100%;
  width: 100%;
  min-height: 300px;
}

.swf-container iframe {
  height: 100%;
  width: 100%;
}

<div class="box-content">
    <div class="swf-container">
        <iframe src="http://localhost/imagebase/image/data/banner/swf/Comp1.swf"></iframe>
    </div>
</div>