Home/ Questions/Q 6842699
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:07:56+00:00

I basically have a layout like this: <body> <div style=height: 150px; width: 200px; background:

  • 0

I basically have a layout like this:

<body>
    <div style="height: 150px; width: 200px; background: green">
      <div style="overflow: auto; max-height: 100px; background: blue">
        some content <br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
      <div style="overflow: auto; background: red">
        some more content<br/>
        some content<br/>
        some content<br/>
        some content<br/>
        some content
      </div>
    </div>
</body>

Now, I want the second div to fill all remaining height of the parent div and show the scroll bar if more space is needed. How can I achieve this?
Currently, the second div never shows a scroll bar and just uses the space it needs, even if that will exceed the parents total height…

UPDATE:
Please test the solution you provide 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using Jquery might help

    <body>
<div style="height: 150px; width: 200px; background: green">
  <div id="c1" style="overflow: auto; max-height: 100px; background: blue">
    some content <br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
  <div id="c2"style="overflow: auto; background: red">
    some more content<br/>
    some content<br/>
    some content<br/>
    some content<br/>
    some content
  </div>
</div>

    in document.ready add this

     var h1=$('#c1').height();
var h2 = 150-h1;
$('#c2').height(h2);
    • 0