AdeshSuryan

The goal here is a dynamic height and width of contents for different device that covers the entire browser window at all times.

Contents “DIV” adapt its height and width to different screen sizes. Try to shrink the browser’s window and you’ll see that the elements will be ordered.

 

 

<div class="head-content">
<h1>Title</h1>
    <p>Block content</p>
</div>
<div class="body-container">
    <section>THE CONTENTS GOES HERE</section>
</div>
<footer class="footer-container">
    Footer
</footer>

 

 

.head-content{
width:100%;
border:1px solid black;
float:left;
}
.body-container{
width:100%;
float:left;
overflow:scroll;
}
.footer-container{
float:left;
border:1px solid black;
width:100%;
}

 

 

$(document).ready(function() {
  function setHeight() {
    var top = $('.head-content').outerHeight();
    var bottom = $('footer').outerHeight();
    var totHeight = $(window).height();
    $('section').css({ 
      'height': totHeight - top - bottom + 'px'
    });
  }

  $(window).on('resize', function() { setHeight(); });
  setHeight();
});