Всем привет! Прошу вас помочь разобраться, хочу в 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>
Подскажите в какую сторону двигаться, реально ли это сделать с моей текущей разметкой?