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

Question

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

height:auto;

在容器 div 上，但当视频出现时，它会传递到 div 容器之外。固定高度解决了问题，但在视频不出现时会留下一大片区域。

Answer 1

您可以尝试下面列出的两个选项之一。

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%; 的属性，否则 min-height 将不起作用。

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>