javascript - 强制 Iframe 进入折叠 Bootstrap 组件以适合屏幕

Question

我正在使用 Accordion Collapse Bootstrap 组件在页面中显示两个折叠项。第一个折叠项默认折叠，第二个在它的主体中有一个显示 pdf 文档的 iframe。我需要第二个可折叠元素以适合屏幕的左侧高度。我试图用 flex 盒子来实现它，但似乎折叠事件和 flex 盒子有问题。如果有任何帮助，我将不胜感激。

这是我的 fiddle 示例:

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

使用 Flexbox 实现这一点有点复杂。

在此fiddle demo我创建/应用了以下类来完成它，完全动态，认为这会破坏 Accordion 的显示/隐藏

.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 ，这不会破坏 Accordion ，而是给 iframe 一个结合视口(viewport)单位 vh 和 CSS calc() 的高度。即使固定高度 160px 有点为人所知，它仍然不如前面的示例动态。

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

---

此外，可以修复第一个示例中的脚本，或者为第二个示例中的脚本添加计算，以获得准确的高度，或者切换到基于 Flexbox 的 Bootstrap 4。

如果不进行一些调整，切换到 Bootstrap 4 可能无法解决问题，因此请在开始迁移之前对其进行全面测试。