bootstrap 4 верстка row внутри container 100% height

Всем привет! Прошу вас помочь разобраться, хочу в bootstrap реализовать header, footer, и 100 % тело от остатка. Пытаюсь сделать 100% div class="row main_row" что бы не вылезал за header и footer - не получается. Jsfiddle здесь:

<main role="main" class="container">
  <div class="clr"></div>
  <div class="row">
    <div class="col-12">
      <h1 class="text-center title_h1">title 1</h1>
    </div>
  </div>
  <div class="row main_row">
    <div class="col-2 column-padding">
      <div class="configuration-row border border-dark rounded">
        <div class="column-header border-bottom border-dark">
          <span>title2:</span>
          <fa class="float-right add_icon" name="plus-square"></fa>
        </div>
        <ul>
          <li><span>Configuration 1</span></li>
          <li><span>Configuration 2</span></li>
          <li><span>Configuration 3</span></li>
          <li><span>Configuration 4</span></li>
          <li><span>Configuration 5</span></li>
        </ul>
      </div>
    </div>
    <div class="col-7 column-padding">
      <div class="confviewer-row border border-dark rounded">
        <div class="column-header border-bottom border-dark">
          <span>title3</span>
          <fa class="float-right add_icon" name="plus-square"></fa>
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt distinctio ipsum iusto laboriosam laborum nobis, perferendis quis repellat. Ab accusamus adipisci asperiores assumenda earum in nobis quis sed. Ex.
        </div>
        <div>Ab ea fugit iure perferendis provident! A accusamus amet aut blanditiis commodi cumque dignissimos impedit, laborum magnam natus obcaecati possimus, provident quaerat quibusdam quod sequi similique tempore temporibus, veritatis vitae?
        </div>
        <div>Consequuntur, deleniti, dolor dolore doloribus dolorum eius illo illum, in modi nostrum recusandae reiciendis rerum sed sit tempora voluptas voluptates? Adipisci commodi cupiditate ducimus explicabo ipsum laboriosam libero qui soluta!
        </div>
        <div>Expedita incidunt ipsa itaque nostrum repellat sed unde? Amet cumque, incidunt ipsum libero possimus voluptatum? Debitis ea eligendi, esse et illum necessitatibus, neque quam quidem repudiandae sint tempora totam vero.
        </div>
        <div>Accusantium, atque blanditiis consectetur distinctio dolore ea earum et exercitationem inventore ipsum laboriosam minima molestiae mollitia nesciunt numquam officia, officiis omnis pariatur perferendis porro quos, reprehenderit vel vero vitae
          voluptas!
        </div>
      </div>
    </div>
    <div class="col-3 column-padding">
      <div class="perseditor-row border border-dark rounded">
        <div class="column-header border-bottom border-dark">
          title4
        </div>
        <ul>
          <li><span>Item number 1</span></li>
          <li><span>Item number 2</span></li>
          <li><span>Item number 3</span></li>
          <li><span>Item number 4</span></li>
          <li><span>Item number 5</span></li>
        </ul>
      </div>
    </div>
  </div>
</main>

Подскажите в какую сторону двигаться, реально ли это сделать с моей текущей разметкой?