Iframe伸展到父浮動的全高度浮動定位

Question

我有一個頁面有2個半個文檔查看器和窗體。我正在使用浮動來將窗體放置在文檔視圖旁邊。我的問題是，作爲iFrame的文檔查看器不會伸展到父div的全部高度，因此它與表單的長度相同。我如何使iFrame與表格的高度相匹配？

在此先感謝您的幫助。我知道我的代碼不完美。

的jsfiddle：https://jsfiddle.net/fsvoqeum/

table { 
 
    text-align: left; 
 
    padding-bottom: 5px; 
 
    margin-bottom: 8px; 
 
} 
 
.box .box-content { 
 
    overflow: auto; 
 
} 
 
.box-head { 
 
    font-size: 24px; 
 
} 
 
.form-view { 
 
    width: 46.5%; 
 
    margin: 1.5%; 
 
    height: 93%; 
 
    display: inline; 
 
} 
 
.thHeader { 
 
    width: 300px; 
 
} 
 
.thNo { 
 
    margin-left: 30px; 
 
} 
 
.verify { 
 
    overflow: auto; 
 
    float: right; 
 
    width: 46.5%; 
 
    margin: 1.5%; 
 
    height: 93%; 
 
}

<div w id="container"> 
 
    <div class="shell"> 
 
    <div class="box"> 
 
     <div class="box-head">Process Forms</div> 
 
     <div class="box-content"> 
 
     <div class="verify"> 
 
      <h1 style="color:black;"><b><u>Verify Upload</u></b></h1> 
 
      <h1 style="color:black;">Volunteer: 
 
      <br> 
 
      Form Type:<br><br> 
 
      </h1> 
 
      <form> 
 

 
      <table width="100%"> 
 
       <tr> 
 
       <th>Tool</th> 
 
       <th class="thHeader"><span>Yes (1)</span><span class="thNo">No (2)</span> 
 
       </th> 
 
       <tr> 
 
        <td>Tool 1</td> 
 
        <td> 
 
        <input type="text" name="first" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 2</td> 
 
        <td> 
 
        <input type="text" name="second" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 3</td> 
 
        <td> 
 
        <input type="text" name="third" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 4</td> 
 
        <td> 
 
        <input type="text" name="fourth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 5</td> 
 
        <td> 
 
        <input type="text" name="fifth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 6</td> 
 
        <td> 
 
        <input type="text" name="sixth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 7</td> 
 
        <td> 
 
        <input type="text" name="seventh" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 8</td> 
 
        <td> 
 
        <input type="text" name="eighth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 9</td> 
 
        <td> 
 
        <input type="text" name="ninth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 10</td> 
 
        <td> 
 
        <input type="text" name="tenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 11</td> 
 
        <td> 
 
        <input type="text" name="eleventh" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 12</td> 
 
        <td> 
 
        <input type="text" name="twelvth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 13</td> 
 
        <td> 
 
        <input type="text" name="thirteenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 14</td> 
 
        <td> 
 
        <input type="text" name="fourteenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
      </table> 
 

 
      </form> 
 

 
     </div> 
 
     <iframe src="https://docs.google.com/viewer?embedded=true&url=http%3A//www.gerd-tentler.de/tools/filemanager/files/Documents/Anschiss%20nach%20dem%20Nettoeinkommen.pdf" class="form-view" width="100%"></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這很容易，如果flexbox是一個選擇：

1. 給display:flex到box-content（也許考慮交換的位置verify和form-view或使用row-reverse）

2. 卸下高度，寬度和漂浮的樣式和給flex:1到Flexbox的兒童 - form-view和verfiy下面

演示：

table { 
 
    text-align: left; 
 
    padding-bottom: 5px; 
 
    margin-bottom: 8px; 
 
} 
 
.box .box-content { 
 
    overflow: auto; 
 
    display:flex; 
 
    flex-direction:row-reverse; 
 
} 
 
.box-head { 
 
    font-size: 24px; 
 
} 
 
.form-view { 
 
    /*width: 46.5%;*/ 
 
    margin: 1.5%; 
 
    /*height: 93%;*/ 
 
    /*display: inline;*/ 
 
    flex:1; 
 
} 
 
.thHeader { 
 
    width: 300px; 
 
} 
 
.thNo { 
 
    margin-left: 30px; 
 
} 
 
.verify { 
 
    overflow: auto; 
 
    /*float: right;*/ 
 
    /*width: 46.5%;*/ 
 
    margin: 1.5%; 
 
    /*height: 93%;*/ 
 
    flex:1; 
 
}

<div w id="container"> 
 
    <div class="shell"> 
 
    <div class="box"> 
 
     <div class="box-head">Process Forms</div> 
 
     <div class="box-content"> 
 
     <div class="verify"> 
 
      <h1 style="color:black;"><b><u>Verify Upload</u></b></h1> 
 
      <h1 style="color:black;">Volunteer: 
 
      <br> 
 
      Form Type:<br><br> 
 
      </h1> 
 
      <form> 
 

 
      <table width="100%"> 
 
       <tr> 
 
       <th>Tool</th> 
 
       <th class="thHeader"><span>Yes (1)</span><span class="thNo">No (2)</span> 
 
       </th> 
 
       <tr> 
 
        <td>Tool 1</td> 
 
        <td> 
 
        <input type="text" name="first" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 2</td> 
 
        <td> 
 
        <input type="text" name="second" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 3</td> 
 
        <td> 
 
        <input type="text" name="third" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 4</td> 
 
        <td> 
 
        <input type="text" name="fourth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 5</td> 
 
        <td> 
 
        <input type="text" name="fifth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 6</td> 
 
        <td> 
 
        <input type="text" name="sixth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 7</td> 
 
        <td> 
 
        <input type="text" name="seventh" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 8</td> 
 
        <td> 
 
        <input type="text" name="eighth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 9</td> 
 
        <td> 
 
        <input type="text" name="ninth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 10</td> 
 
        <td> 
 
        <input type="text" name="tenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 11</td> 
 
        <td> 
 
        <input type="text" name="eleventh" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 12</td> 
 
        <td> 
 
        <input type="text" name="twelvth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 13</td> 
 
        <td> 
 
        <input type="text" name="thirteenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td>Tool 14</td> 
 
        <td> 
 
        <input type="text" name="fourteenth" size=4 maxlength=1> 
 
        </td> 
 
       </tr> 
 
      </table> 
 

 
      </form> 
 

 
     </div> 
 
     <iframe src="https://docs.google.com/viewer?embedded=true&url=http%3A//www.gerd-tentler.de/tools/filemanager/files/Documents/Anschiss%20nach%20dem%20Nettoeinkommen.pdf" class="form-view" width="100%"></iframe> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>