我在 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>
最佳答案
您为您的 div 设置了 56.25% 的 padding-bottom。 这意味着父元素宽度的 56.25%。 由于您的父元素与屏幕宽度一样大,因此您的 padding-bottom 会随着屏幕宽度的增加而增长。
考虑为您的 iframe 提供固定的宽度/高度,并以 px 为单位进行绝对填充,并移除绝对/相对定位。
关于html - css 最大高度在 div 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27773124/