title: Twitter bootstrap 4 two columns full height without scroll
body: <p>I'm trying to make two-column full-height layout with bootstrap 4. What I want to do is:</p>
  <pre><code>  +-------------------------------------------------+
    | Logo                Header          Another Logo| - height 10 %
    +----------------------------------+--------------+                 -
    |                                  |   Content 2  | - height 10 %    |
    |                                  |--------------|                  |
    |                                  |              |                  |
    |                                  |     width    |                  |
    |    Content 1 - width 70%         |      30%     | - height 60%     | - height total 90%
    |                                  |   Content 3  |                  |
    |                                  |              |                  |
    |                                  +--------------+                  |
    |                                  |   Content 4  | - height 20%     |
    +----------------------------------+--------------+                 -
  </code></pre>
  <p>All the contents should be visible in screen without scrolling. I want to squeeze or extent the widths and heights according to resolution. That means i strictly want to avoid scrolling.</p>
  <p>Note: this design is only for desktop view i.e. width &gt; 768 px. So no need to think about mobile view.</p>