iframeを親divの全高に伸ばして浮動小数点数を設定

Question

私は、ドキュメントビューアとフォームを半分にしたページを持っています。私はフロートを使用してドキュメントビューの横にフォームを配置しています。私の問題は、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. はbox-contentにdisplay:flexを与える（多分の位置を入れ替える考えますverifyおよびform-viewまたはフレキシボックスの子どもたちへflex:1幅、高さを削除し、スタイルを浮遊し与えるrow-reverse）

2. を使用して - 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>