Question

我在css中创建了一个脚本，该脚本应该为标识为＆＃39; embed-container＆＃39;的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％的底部。这意味着父元素的WIDTH的56.25％。由于您的父元素变得与屏幕宽度一样大，因此您的填充底部会随着屏幕宽度而增长。

考虑给你的iframe一个固定的宽度/高度，并在px中填充绝对值，并删除绝对/相对定位。

Answer 2

填充底部是问题。您可以将高度设置为视口宽度，然后应使用max-height

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

css max-height在div中不起作用

2 个答案: