如何在填充的内容上展开和折叠div容器

时间:2014-10-26 05:41:10

标签: html css

我有一个div,在某些情况下可能会填充一个视频。我试着用

height:auto;
容器div上的

但是当视频出现时它会通过div容器外部。 固定高度可以解决问题,但在视频没有出现时会留下很大的区域。

2 个答案:

答案 0 :(得分:0)

您可以尝试以下两种选项之一。

You can view the JSFiddle here. I also provide more comments within the JSFiddle to help guide you better.

选项1 - 将保持视频空白的div的高度保留为空,CSS将自动调整。

CSS:

.videoDivOption1 {
    /* blank */
    }

HTML:

<div class="videoDivOption1">
    The text represents your video. Once your delete the text it represents no video.
</div>

或者您可以对该div使用min-height,但父div必须具有height:100%;的属性,否则最小高度将不起作用。

CSS:

.videoDivOption2_Container {
    height:100%;
    }

 .videoDivOption2 {
    min-height:0px;
    }

HTML:

<div class="videoDivOption2_Container">
    <div class="videoDivOption2">
        The text represents your video. Once your delete the text it represents no video.
    </div>
</div>

答案 1 :(得分:0)

您还需要为此div设置最小高度,其中视频显示为

 height:auto;
 min-height:50px; /* or something else*/