Set div height and scroll accordingly

Question

There are a lot of questions related to this question.

I have tried almost all that I could probably find, but still did not serve the purpose I was looking for.

My page structure is like this.

<div>
   <header id="status">
     // The content within this section changes dynamically
   </header>
   <div id="summary">
     // This div height should adjust accordingly and have a vertical scroll if needed
   </div>
</div>

I am currently using the following script to do this, but I am not able to scroll to the bottom when ever the text in the header is lengthy.

<script>
$(document).ready(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

$(window).resize(function () {
    var h = $(window).height();
    var headerHt = $("#status").height();
    summaryHeight = h - headerHt;
    $('#summary').css("height", summaryHeight + 'px'); $('#summary').css({ "overflow-y": "auto", "overflow-x": "hidden" });

min-height and 'max-height' did not help me.

Please help me with this, I have been stuck with this for more than a month. Earlier I was able to achieve this by setting the height to a value, but with the header height changing, that approach will not work.

Answer 1

I suggest you use flexbox

 html, body { margin: 0; } .wrapper { display: flex; flex-direction: column; height: 100vh; } #status { background: lightgray; padding: 20px 10px; } #summary { flex: 1; overflow: auto; padding: 20px 10px 0 10px; } 

 <div class="wrapper"> <header id="status"> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> </header> <div id="summary"> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> </div> </div> 

Side note: This is how an IE8/9 user will see the above flex , and since their is less than 2% of them out there, I think is a great fallback and keep your code clean

 html, body { margin: 0; } .wrapper { /*display: flex;*/ flex-direction: column; height: 100vh; } #status { background: lightgray; padding: 20px 10px; } #summary { flex: 1; overflow: auto; padding: 20px 10px 0 10px; } 

 <div class="wrapper"> <header id="status"> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> The content within this section changes dynamically<br> </header> <div id="summary"> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> This div height should adjust accordingly and have a horizontal scroll if needed<br> </div> </div> 

Answer 2

I feel your pain. Flexbox is the new way to do this and has some good polyfills but if you are already committed to jquery then I have created a JSfiddle with a quick scratch of what I think you are trying to acheive:

https://jsfiddle.net/c0un7z3r0/t9dde970/

The Jquery was fine, it just needed the css to position the elements so that they behave as expected.

#container{
  position:absolute;
  top;0;
  left:0;
  right:0;
  height:100vh;
  padding:0;
  margin:0;
  background:white;
  display:inline-block;
  vertical-align:top;
}
#status{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:0;
  margin:0;
  background:red;
}
#summary{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:inline-block;
  padding:0;
  margin:0;
  background:blue;
}

Its also worth pointing out, to get the child elements of #summary to overflow to the right of the screen (rather than down) requires you to set some rules for the elements so that they dont linebreak when they hit the right edge of the screen, something like:

#summary{
    overflow-x:auto;
    overflow-y:hidden;
}
#summary > #summary-content{
    display:inline-block;
    white-space:nowrap;
}

Answer 3

Set height of both div with vh unit. For example set height of header 30vh and set height of #summary 70vh. That's it.