Nick Nick - 22 days ago 9
CSS Question

Iframe stretch to full height of parent div with float positioning

I have a page that has 2 halfs a document viewer, and form. I am using a float to position the form next to the document view. My problem is that the document viewer, which is an iFrame, won't stretch to the full height of the parent div, so it is the same length as the form. How do I make the iFrame match the height of the form?

Thanks in advance for any help. I know my codes not perfect.

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

It is easy if flexbox is an option for you:

  1. Give display:flex to the box-content (maybe consider swapping the positions of verify and form-view or using row-reverse)

  2. Remove the height, width and float styles and give flex:1 to the flexbox children - form-view and verfiy

Demo below:

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>