title: Responsive iFrame height across all screen sizes
body: <p>In my code, I have two iFrames both with responsive widths. How can I get both iFrames to have set heights like I have in my code but for the height to adjust accordingly to the screen size. For example, the heights now fit perfectly to a 12" MacBook. I would like the iFrames to adjust the height across all screen resolutions but for the iFrame height to stop before the footer with the excess content in the iFrames to scroll.</p>
  
  <p>Code:</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>body {
    /* General Body Properties */
    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
  }
  
  * {
    /* Key element to aligning &lt;divs&gt; (DO NOT REMOVE) */
    box-sizing: border-box;
  }
  
  #wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0
  }
  
  .header {
    /* Header properties featuring myEd and school emblems */
    padding: 30px;
    text-align: center;
    /* Aligns links in the navBar */
    background-image: url(/Default/Img/backgroundHeader-4K.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .myEd-reverse {
    width: 240px;
    height: 70px;
    float: left;
    margin-left: -60px;
    margin-top: -40px;
  }
  
  .navBar {
    /* Sticky navBar, either relative or fixed, depending on the scroll position of the site */
    overflow: hidden;
    background-color: #333;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
  }
  
  .navBar a {
    /* Style the navBar links */
    float: left;
    display: block;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    text-decoration: none;
  }
  
  .navBar a.right {
    /* Float Quick Links, Help and Log-out navBar directory items to the right of the navBar */
    float: right;
  }
  
  .navBar a:hover {
    /* Change color on hover */
    background-color: #ddd;
    color: #000;
  }
  
  .navBar a.active {
    /* Active Link */
    background-color: #666;
    color: #fff;
  }
  
  .row {
    /* Alignment between sideBar and main */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .sideBar {
    /* sideBar alignment properties */
    -ms-flex: 20%;
    flex: 20%;
    background-color: #a7a7a7;
    padding: 0px;
    height: 5000px;
    /* As standard to work on all screen resolutions, overflow hides excess */
    overflow-y: scroll;
    /* Allows myEd news to scroll */
    overflow: hidden;
  }
  
  .profilePanel {
    /* Panel properties */
    background-color: #585858;
    width: 100%;
    padding: 0px;
  }
  
  #newsmyEd {
    width: 100%;
    height: 9.4%;
    top: 0;
    right: 0;
  }
  
  .main {
    /* Main Column */
    -ms-flex: 80%;
    flex: 80%;
    background-color: #a7a7a7;
    padding: 0px;
    height: 5000px;
    /* As standard to work on all screen resolutions, overflow hides excess */
    overflow-y: scroll;
    /* Allows embedded iFrame to scroll */
    position: relative;
    overflow: hidden;
  }
  
  .frameMain {
    /* Frame Properties */
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
  }
  
  .footer {
    /* Footer properties */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
  }
  
  .footer a {
    /* Footer navBar properties */
    float: right;
    display: block;
    color: #fff;
    text-align: center;
    padding: 6px 12px;
    text-decoration: none;
  }
  
  .footer a:hover {
    /* Change color on hover */
    background-color: #ddd;
    color: #000;
  }
  
  .footer a.active {
    /* Active Link */
    background-color: #666;
    color: #fff;
  }
  
  @media screen and (max-width: 700px) {
    /* Responsive Layout - If screen px is less than 700px, make sideBar and main stack on top of each other */
    .row {
      flex-direction: column;
    }
  }
  
  @media screen and (max-width: 400px) {
    /* Responsive Layout - If screen px is less than 400px, make navBar links stack vertically on top of each other */
    .navBar a {
      float: none;
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Welcome | myEd&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/Home/Welcome/Style/style.css"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"&gt;
    &lt;link rel="shortcut icon" href="/Default/Img/faviconmyEd-16x16.png"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;script&gt;
      // Required scripts for certain activities on myEd, each entry will be noted for understanding
    &lt;/script&gt;
    &lt;div id="wrapper"&gt;
      &lt;!-- Wrapper fitting website to all screen resolutions --&gt;
      &lt;div class="header"&gt;
        &lt;!-- Header featuring 4K Background, myEd and school emblems --&gt;
        &lt;img src="/Default/Img/myEd-reverse.png" class="myEd-reverse" alt="myEd" title="myEd Software"&gt;
        &lt;!-- myEd Software --&gt;
      &lt;/div&gt;
      &lt;div class="navBar"&gt;
        &lt;!-- Main sticky navBar with categories listed --&gt;
        &lt;a href="#" class="active" title="Home Workspace"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Home --&gt;
        &lt;a href="#" title="Learning Workspace"&gt;&lt;i class="fa fa-book"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Learning --&gt;
        &lt;a href="#" title="Student Management Workspace"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Student Management --&gt;
        &lt;a href="#" title="Portal Workspace"&gt;&lt;i class="fa fa-globe"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Portals --&gt;
        &lt;a href="#" class="right" title="Log-out"&gt;&lt;i class="fas fa-sign-out-alt"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Log-out (right to left) --&gt;
        &lt;a href="#" class="right" title="Help"&gt;&lt;i class="fa fa-question-circle"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Help (right to left) --&gt;
        &lt;a href="#" class="right" title="Quick Links"&gt;&lt;i class="fa fa-bookmark"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Quick Links (right to left) --&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;!-- Format for alignment of the sideBar and main panels --&gt;
        &lt;div class="main"&gt;
          &lt;!-- Main learning or collaborative workspace --&gt;
          &lt;iframe class="frameMain" width="100%" height="11.4%" scrolling="yes" src="/Home/Welcome/iFrame/index.html"&gt;&lt;/iframe&gt;
          &lt;!-- Embedded frame --&gt;
        &lt;/div&gt;
        &lt;div class="sideBar"&gt;
          &lt;!-- sideBar featuring Profile, myEd News and directory --&gt;
          &lt;div class="profilePanel" style="height: 100px"&gt;&lt;/div&gt;
          &lt;!-- Dark grey panel where student info iFrame will lay --&gt;
          &lt;iframe id="newsmyEd" frameborder="0" src="/Default/News/index.html"&gt;&lt;/iframe&gt;
          &lt;!-- myEd News --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
        &lt;!-- Featuring Site Navigation and myEd News navBar links --&gt;
        &lt;a href="#" class="active" title="myEd News"&gt;&lt;i class="far fa-newspaper"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- myEd News --&gt;
        &lt;a href="/Home/Welcome/siteNavigation/index.html" title="Site Navigation"&gt;&lt;i class="fa fa-location-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;!-- Site Navigation --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your assistance.
  Tom</p>