Question

实际上，我想根据列的高度动态调整iframe的高度.Html代码 -

＆＃13;

.demo{
        margin-bottom: -99999px;
        padding-bottom: 99999px;
        background-color:#efefef;

    }

    #equalheight {
        overflow: hidden;
    }

＆＃13;

<div class="row">
        <div id="equalheight">
            <div class="col-xs-6 demo"><iframe class="embed-responsive-item" src= "{{ $name }}" ></iframe></div>
            <div class="col-xs-6 demo"><?php echo var_dump($data);?></div>
        </div>
    </div>

＆＃13;

但问题是iframe的大小没有变化。只有背景大小根据var_dump（$ data）而变化。我想根据文件调整iframe大小（var_sump（$ data））。

Answer 1

尝试调整iframe尺寸容器，而不仅仅是iframe尺寸。

Answer 2

将display: flex;添加到父级，将height: 100%;添加到框架

.demo {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  background-color: #efefef;
}

#equalheight {
  overflow: hidden;
  display: flex;
}

.embed-responsive-item {
  height: 100%;
}

<div class="row">   
    <div id="equalheight">
        <div class="col-xs-6 demo"><iframe class="embed-responsive-item" src= "{{ $name }}" ></iframe></div>            <div class="col-xs-6 demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim eleifend eros, non condimentum nulla pellentesque vel. Cras pretium dolor arcu, eget iaculis enim cursus ac. Proin ornare quam nibh, eget sodales urna consectegtur vitae. Cras justo tellus, mollis vel euismod non, vehicula eu urna. Praesent non mattis dui. Sed ut felis nec nunc dignissim porttitor sed in augue. Suspendisse sed velit ut sapien gravida scelerisque sit amet nec neque. Sed mauris dui, interdum id augue vitae, faucibus sollicitudin ante. </div>
    </div>
</div>

调整iframe的高度

2 个答案: