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的原因是因为我正在开发一个供公司局域网内部使用的应用程序，当我尝试将pdf作为对象嵌入时，我得到一个Access Denied错误。

此外，当一个事件被触发时，div custDetails的大小调整为col-md-6，当模态完成后，div的大小调整为\ reclassed。

如何将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>

希望这会起作用

Answer 2

我们走了......

<div style="display:flex; flex-wrap:wrap; align-items: stretch;">
    <div style="background-color:red; border: 2px solid black;">DIV 1<br/>DIV 1<br/>DIV 1<br/>DIV 1<br/></div>
    <div style="background-color:green; border: 2px solid black;">DIV 2DIV 1<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/>DIV 2<br/></div>
    <div style="background-color:blue; border: 2px solid black;">DIV 3</div>
    <div style="background-color:gray; border: 2px solid black;">DIV 4</div>
    <div style="background-color:yellow; border: 2px solid black;;">DIV 5</div>
</div>

希望它有所帮助......

Bootstrap网格行高度相同

2 个答案: