46

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.

2
  • Hi TCC - thank you for asking! Actually my case was a bit more complex than that - I added UPDATE-1 with a new fiddler.
    – Dan L.
    Mar 21, 2012 at 22:36
  • What you're trying to do is very hard without specifying hard heights, i.e., set d3-2 to max height of d3's height minus d3-1's height. Mar 21, 2012 at 23:31

8 Answers 8

66

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.

20

If you put overflow: scroll on a fixed height div, the div will scroll if the contents take up too much space.

11

Instead of overflow:auto, try overflow-y:auto. Should work like a charm!

8

Is this what you are wanting?

<body>
  <div id="div1" style="height: 500px;">
    <div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
      <div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
    </div>
  </div>
</body>

http://jsfiddle.net/fMs67/1/

0
3

i have just added (overflow:scroll;) in (div3) with fixed height.

see the fiddle:- http://jsfiddle.net/fMs67/10/

2

I created an enhanced version, based on Trey Copland's fiddle, that I think is more like what you wanted. Added here for future reference to those who come here later. Fiddle example

    <body>
<style>
.modal {
  height: 390px;
  border: 5px solid green;
}
.heading {
  padding: 10px;
}
.content {
  height: 300px;
  overflow:auto;
  border: 5px solid red;
}
.scrollable {
  height: 1200px;
  border: 5px solid yellow;

}
.footer {
  height: 2em;
  padding: .5em;
}
</style>
      <div class="modal">
          <div class="heading">
            <h4>Heading</h4>
          </div>
          <div class="content">
              <div class="scrollable" >hello</div>
          </div>
          <div class="footer">
            Footer
          </div>
      </div>
    </body>
0

The simplest way is as this example:

<div>
   <div style=' height:300px;'>
     SOME LOGO OR CONTENT HERE
   </div>
   <div style='overflow-x: hidden;overflow-y: scroll;'> 
      THIS IS SOME TEXT
   </DIV>

You can see the test cases on: https://www.w3schools.com/css/css_overflow.asp

-1

function start() {
	document.getElementById("textBox1").scrollTop +=5;
    scrolldelay = setTimeout(function() {start();}, 40);
}

function stop(){
	clearTimeout(scrolldelay);
}

function reset(){
	var loc = document.getElementById("textBox1").scrollTop;
	document.getElementById("textBox1").scrollTop -= loc;
	clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and start 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.