iframe通过浮动定位拉伸到父div的全高度

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）

   < / LI>

2. 删除高度，宽度和浮动样式，并将flex:1提供给flexbox儿童 - form-view和verfiy

演示如下：

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;