title: Fixing row height for different row divs boostrap
body: <p>Apologies, my HTML bootstrap knowledge is limited and though I tried different approaches it did not help solve the problem.</p>
  <p><strong>What I expect:</strong></p>
  <p><strong>Div Row 1</strong> -&gt; 10% of the max height</p>
  <p><strong>Div Row 2</strong> -&gt; 70% of the max height</p>
  <p><strong>Div Row 3</strong> -&gt; remaining 20% of the max height</p>
  <p>Also, I expect the entire container to fit within the viewable area i.e. <strong>no scrolling</strong> and <strong>responsive</strong> to the screen size. I am unable to achieve that...Thank you in advance!</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
    &lt;audio id=&quot;mySong&quot; src=&quot;&quot;&gt;&lt;/audio&gt;
    &lt;div class=&quot;row row1&quot;&gt;Counter: &lt;span id=&quot;iteration&quot;&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;row row2&quot;&gt;
      &lt;video class=&quot;input_video col-md-6 hidden&quot;&gt;&lt;/video&gt;
      &lt;div class = &quot;embed-responsive embed-responsive-16by9 col-md-6&quot;&gt;
        &lt;video id=&quot;videosToPlay&quot; width=&quot;100%&quot; autoplay playsinline&gt;
          &lt;source id=&quot;idle_video&quot; src=&quot;&quot; type=&quot;video/mp4&quot;&gt;
        &lt;/video&gt;  
      &lt;/div&gt;
      &lt;canvas class=&quot;output_canvas col-md-6&quot; width=&quot;640px&quot; height=&quot;480px&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row top-buffer row3&quot;&gt;
      &lt;canvas class=&quot;bar_canvas col-md-12&quot;&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The CSS is as follows:</p>
  <pre><code>.hidden { visibility:hidden; display:none; }
  
  html, body, .container-fluid {
      height:100%;
  }
  
  .top-buffer { margin-top:20px; }
  
  .row1  {
      height:10%;
  } 
  
  
  .row2  {
      height:70%;
  } 
  
  .row3  {
      height:20%;
  } 
  </code></pre>