Jil Jil - 2 months ago 6
CSS Question

Set div height and scroll accordingly

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

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>