强制Iframe放入折叠引导组件以适合屏幕

Question

我正在使用Accordion折叠引导组件在页面中显示两个折叠项目。第一个折叠项目默认折叠，第二个折叠项目中有一个显示PDF文档的iframe。我需要第二个可折叠项目来适应屏幕的左侧高度。我试图用弹性盒来实现它，但似乎崩溃事件和弹出框有问题。我将不胜感激任何帮助。

这是我的小提琴例如：

Example

下图描述了不希望的行为：

<vp-leftpanel> 
    <div class="panel-group" id="accordion" role="tablist" aria- 
     multiselectable="true"> 
     <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
       {{panelHeadingData}} 
      </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      <div *ngIf="candidate.hasEmailSourceData"> 

       ..... 

      </div>     
     </div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <div class="panel-title"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
         {{panelHeadingResume}} 
        </a> 
       </div> 
       <div class="col-md-6"> 
        <select class="form-control" (change)='loadDocument($event.target.value)'> 
         <option [value]="d.id" *ngFor="let d of candidate.candidateDocuments">{{d.friendlyName}}</option> 
        </select> 
       </div> 
      </div> 

     </div> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
      <div *ngIf="candidate.candidateDocuments.length > 0" class="apply-flex"> 
       <iframe [src]="documentSelectedPathSafe" type="application/pdf" ></iframe> 
      </div> 
     </div> 
    </div> 
</div> 
    </div> 
    </vp-leftpanel> 

Answer 1

只是max-height: 200px;更换CSS height=100%。

Answer 2

为了使Flexbox具有一定的复杂性，

在这种fiddle demo我创建/应用下面的类来完成它，完全动态的，认为这将打破手风琴的显示/隐藏

.fullvh { 
    height: 100vh; 
} 
.flex-box-col { 
    display: flex; 
    flex-direction: column; 
} 
.flex-grow { 
    flex-grow: 1; 
} 
.pos-relative { 
    position: relative; 
} 
/* as it didn't work adding "flex-box-col flex-grow" to this 
    elements class, I added it using its ID #collapseTwo */ 
#collapseTwo {   
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
} 
.pos-absolute { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

---

的替代，在这个fiddle demo，不会打破手风琴，而不是给iframe一个高度结合视口单位vh和CSS calc()。即使固定高度160px在某种程度上是已知的，它仍然不如以前的样本动态。

#collapseTwo iframe { 
    height: calc(100vh - 160px); 
    width: 100%; 
} 

---

另外，一个可在第一样品中的修复脚本，或者在第二添加计算的脚本，以获得精确的高度，或交换自举4，其是基于Flexbox的。

交换到引导程序4可能无法解决问题，因此在开始迁移之前应对其进行彻底测试。