V
V
Viktor Tumanov2016-02-18 17:17:59
css
Viktor Tumanov, 2016-02-18 17:17:59

How to layout two blocks to the full height of the page?

There is a given page structure, how to make it so that on high screens the block .contentstretches to the full height to the footer.

<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;
}

You can see here

Answer the question

In order to leave comments, you need to log in

2 answer(s)
V
Viktor Tumanov, 2016-02-19
@benny214

Thank you, I solved the problem with a script

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();
  } );

M
MNB, 2016-02-18
@MNB

codepen.io/anon/pen/zrQvXN

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question