html - Bootstrap 网格行相同高度

Question

我知道这个问题已被问过很多次，但对于我的问题，建议的解决方案不起作用。

我在表单旁边以模态向用户展示 PDF。下图。

我遇到的问题是 iframe 设置为 100%，因为它会达到 100% 的最大尺寸，这是按照图片显示的。

如果我给的是固定尺寸435px；它的大小适合我的屏幕。因为我需要它与屏幕无关，所以我希望它根据它出现的模态来调整自己的大小。

我尝试使用此处的工作示例 http://www.bootply.com/92230这个例子和我今天早上在网上看到的一样。

这个的 HTML 是

<div class="row">
     <div id="equalheight">
          <div id="loa" class="col-md-6 demo NotShown">
               <iframe src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf" class="mh100Percent mw100" frameborder="0" scrolling="no">
                                        <p>It appears your web browser doesn't support iframes.</p>
               </iframe>
           </div>
           <div id="custDetails" class="col-md-12 demo">
           ...
           </div>

      </div>
 </div>

我不得不使用 iFrame 的原因是因为我正在开发一个供公司 LAN 内部使用的应用程序，当我尝试将 pdf 作为对象嵌入时，我遇到了拒绝访问错误。

此外，当事件被触发时，div custDetails 被调整为 col-md-6 并且当模态完成时 div 被调整大小\重新分类。

任何关于如何显示 iFrame 与它旁边的表单大小相同的帮助都会很棒。

谢谢

西蒙

Answer 1

<style>
    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    iframe {
        height: 100%;
        position: absolute;
    }
</style>

<div class="row row-eq-height">
    <div id="loa" class="col-md-6 demo NotShown">
        <iframe
            src="\\sqlmuldvwsk06.ukskpre.santanderuk.pre.corp\Public\CMCFileUpload\LOAFiles\SRA557034_321043.004.pdf"
            class="mh100Percent mw100" frameborder="0" scrolling="no">
            <p>It appears your web browser doesn't support iframes.</p>
        </iframe>
    </div>
    <div id="custDetails" class="col-md-6 demo">
        ...
    </div>

</div>

希望这能奏效