CSS高度:无法增加父类的高度

CSS Height : Unable to increase the height of parent class?

本文关键字：高度 父类 增加 CSS      更新时间：2023-09-26

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

<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文件。

是否有任何方法可以自动改变这个box-content类的高度在javascript或jQuery的p和iframe推荐。

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

编辑

正如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>

相关文章：