Как сверстать два блока на всю высоту страницы?

Question

[Виктор Туманов]

Есть данная структура страниц, как сделать так, чтоб на высоких экранах блок .content тянулся на всю высоту до футера.

<div id="wrapContent" class="wrapContent">
  <div class="container">
    <div class="row">
      <header>
      </header>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div id="content" class="content clearfix">
        <div class="col-xs-12">
          <div class="flex-container">
            <div class="col-xs-8 leftBlock">
            </div>
            <div class="col-xs-4 rightBlock">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <footer>
    </footer>
  </div>
</div>

html,
body {
  height: 100%;
  min-height: 100%;
}

.wrapContent {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
  margin: 0 auto -71px;
  padding-bottom: 70px;
  background: #323742;
}

.container {
  width: 1170px !important;
  margin: 0 auto;
}

header {
  overflow: visible;
  height: 189px;
  background: #222;
}

.content {
  min-height: 516px;
}

.flex-container {
  min-height: 516px;
  overflow: hidden;
  margin-right: -15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.leftBlock {
  background: #fff;
}

.rightBlock {
  background: #ccc;
}

footer {
  background: #222;
  height: 71px;
}

Посмотреть можно тут

Comments

[Donald Dak]

не очень ясен ваш вопрос

Answer 1

[Виктор Туманов]

Спасибо, проблему решил скриптом

function rightBlockHeight() {
    var height = $( window ).height() - $( '#footer' ).height() - $( "#header" ).height();
    $( '#content' ).css( 'min-height', height );
    $( '.rightBlock' ).css( 'min-height', height );
  }
  $( document ).ready( function() {
    rightBlockHeight();
  } );
  $( window ).resize( function() {
    rightBlockHeight();
  } );

Answer 2

[MNB]

codepen.io/anon/pen/zrQvXN