調整高度的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大小。