调整高度的iframe

Question

其实，我想调整的iframe的高度，根据柱的高度dynamically.Html代码 -

.demo{ 
 
     margin-bottom: -99999px; 
 
     padding-bottom: 99999px; 
 
     background-color:#efefef; 
 

 
    } 
 

 
    #equalheight { 
 
     overflow: hidden; 
 
    }

<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>

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

Answer 1

添加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>

Answer 2

尝试调整您的iframe大小容器，而不仅仅是iframe大小。