Answer the question
In order to leave comments, you need to log in
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 .content
stretches 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;
}
Answer the question
In order to leave comments, you need to log in
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();
} );
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question