使弹出窗口的高度扩展到其子项的内容答案

【问题标题】：make a popup's height expand to the content of it's children使弹出窗口的高度扩展到其子项的内容
【发布时间】：2019-02-24 19:01:58
【问题描述】：

我想在弹出窗口中嵌入来自网站的视频。我希望视频的宽度等于视口的 60%，并自动计算视频的高度以保持纵横比。问题是 iframe 相应地改变了宽度，但我无法让包含的 div 扩展它的高度以完全包含 iframe。

这是我的代码：

#popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 20; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
    }
    
    #popup-content {
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        width: 60%;
        border-radius: 10px;
        position: relative;
    }
    
    .close {
        position: absolute;
        top: 0;
        right: 0;
        color: #ddd;
        font-size: 50pt;
        text-shadow: 0 0 3px black;
    }
    
    .close:hover, .close:focus {
        color: #fff;
    }
    
    iframe {
        border-radius: 10px;
        border:0;
        padding: 60px 0;
        width: 100%;
    }

<div id="popup" style="display: block;">
  <div id="popup-content">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://www.aparat.com/video/video/embed/videohash/5kInv/vt/frame" width="100%" height="100%"></iframe>   <button type="button" class="close"><strong>×</strong></button>
</div>
</div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您应该使用纵横比。像这样：

#popup {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 20; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
}

#popup-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 60%;
  border-radius: 10px;
  position: relative;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
  color: #ddd;
  font-size: 50pt;
  text-shadow: 0 0 3px black;
}

.close:hover, .close:focus {
  color: #fff;
}

.embed-container {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.27198%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}

.embed-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 10px;
 border:0;
 }

<div id="popup" style="display: block;">
  <div id="popup-content">
  <div class="embed-container">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://www.aparat.com/video/video/embed/videohash/5kInv/vt/frame" width="100%" height="100%"></iframe></div>   <button type="button" class="close"><strong>×</strong></button>
</div>
</div>

【讨论】：