title: How to fit iframe and div in 100% height combined?
body: <p>I'm having difficult times to find a way to fit an iframe and div both with 100% full height on the page. Ideally I need to have a footer menu with 280px height and the iframe div needs to cover the rest of the page.</p>
  
  <p>As far as I researched, it will be possible only with jQuery. I tried CSS Flex without success.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt-br"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;header class="header-flex"&gt;
  
                  &lt;div class="map"&gt;
                      &lt;h2&gt;One&lt;/h2&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="footer"&gt;
                      &lt;h2&gt;Two&lt;/h2&gt;
                      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/header&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea?</p>
  
  <p>Thanks</p>