<div> Bootstrap 3 </div>的动态高度

Question

我有<div>这样：

<div class="embed-responsive embed-responsive-16by9">
       <iframe class="embed-responsive-item" src="slider.html"></iframe>
</div>

但是当我将屏幕尺寸减小到小或中等时，我会在<div>下方获得空白区域。

喜欢这个：

如何为此<div>设置动态高度以避免出现空格？

Answer 1

您需要使用javascript来发现动态高度。

我们在这个链接中有一些功能： make iframe height dynamic based on content inside- JQUERY/Javascript

并在浏览器调整大小时调用。

Answer 2

使用媒体查询，并将其添加到自定义css

这只是一个样本

@media (min-width: 992px) and (max-width: 1199px) {
 .visible-md-block {
 display: block !important;
}