title: Iframe with footer and scrollabe content
body: <p>I have aspx page that are in <code>iframe</code>.</p>
  
  <p>I need to add buttons on this page to footer and make it's content scrollable (all content is inside <code>table</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/sQLh0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sQLh0.jpg" alt="enter image description here"></a></p>
  
  <p>So on page I have :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Buttons Footer*/
  .full-scrollable-height {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
  }
  
  form.form-full-height {
   height: 83%;
   overflow: hidden;
   margin: 0;
  }
  
   form.form-full-height .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 50px;
    background-color: #ffffff;
    /*padding-top: 15px;*/
    /*border-top: 1px solid #B7B7B7;*/
   }
  /* End Footer*/
  
  td{height:30px;border: 1px solid red;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div style="height:200px"&gt;
  &lt;form class="form-full-height"&gt;
    &lt;div class="full-scrollable-height"&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Cell 1&lt;/td&gt;
          &lt;td&gt;Cell 2&lt;/td&gt;
          &lt;td&gt;Cell 3&lt;/td&gt;
          &lt;td&gt;Cell 4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;
      &lt;div class="container"&gt;
     &lt;div class="col-xs-12"&gt;
      &lt;div class="pull-left"&gt;
       &lt;a class="btn btn-default" href="#"&gt;Save Template&lt;/a&gt;
       &lt;a class="btn btn-default" href="#"&gt;Load Template&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="pull-right"&gt;
       &lt;a href="#" class="btn btn-primary"&gt;Save&lt;/a&gt;
       &lt;a href="#" class="btn btn-primary"&gt;Cancel&lt;/a&gt;
      &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problems : Is this approach fine? I mean setting height for table-wrap div? Can I somehow skip this is I know height of iframe?</p>
  
  <p>And can I set buttons in the middle of footer (vertical-align : middle doesn't work here and if make footer <code>inline-block</code> it looks very bad )</p>