強制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可能無法解決問題，因此在開始遷移之前應對其進行徹底測試。