<div>引导程序3的动态高度

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

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

这只是一个样品

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