强制 iframe 进入折叠引导组件以适应屏幕

Question

我正在使用 Accordion Collapse 引导组件在页面中显示两个折叠项。默认情况下，第一个折叠项是折叠的，第二个在它的主体中有一个显示 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

使用 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%;
}

---

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

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

Answer 2

只需将 CSS height=100% 替换为 max-height: 200px;。