Home/ Questions/Q 7667607
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T15:08:57+00:00

I have the following HTML: http://jsfiddle.net/fMs67/ . I’d like to make the div2 to

  • 0

I have the following HTML: http://jsfiddle.net/fMs67/. I’d like to make the div2 to respect the size of div1 and scroll the contents of div3.

Is this possible?

Thanks!

UPDATE-1:

This is the more advanced case that I oversimplified when I asked the question: http://jsfiddle.net/Wcgvt/. I need somehow that header+it’s sibling div to not overflow the parent div’s size.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Adding position: relative to the parent, and a max-height:100%; on div2 works.

    <body>
  <div id="div1" style="height: 500px;position:relative;">
    <div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
      <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
  </div>

</body>​

    Update: The following shows the “updated” example and answer. http://jsfiddle.net/Wcgvt/181/

    The secret there is to use box-sizing: border-box, and some padding to make the second div height 100%, but move it’s content down 50px. Then wrap the content in a div with overflow: auto to contain the scrollbar. Pay attention to z-indexes to keep all the text selectable – hope this helps, several years later.

    • 0