CSS最大高度在div中不起作用

Question

我在css中創建了一個腳本，該腳本應為被標識為“嵌入式容器”的div提供最大高度，但是它不起作用。 有什么幫助嗎？
CSS：

.embed-container iframe {
max-height: 360px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed-container {
max-height: 360px;
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
overflow: hidden;
}

HTML：

<div class="embed-container">
<iframe src="slideshow/slideshow.html" frameborder="0" scrolling="no"></iframe>
</div>

Answer 1

您給div的底部填充為56.25％。 這意味着父元素的寬度的56.25％。 由於父元素的大小與屏幕的寬度一樣大，因此填充的底部會隨着屏幕的寬度而增大。

考慮為您的iframe提供固定的寬度/高度，並以px為單位填充絕對值，然后刪除絕對/相對位置。

Answer 2

底部填充是問題。 您可以將高度設置為視口寬度，然后應使用max-height

height: 56.25vw; /* 16:9 */