Reputation: 1747

scrollable div inside container

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.

Upvotes: 48

Answers (8)

Trey Copeland

Reputation: 3527

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/

Upvotes: 9

Chris Carew

Reputation: 1418

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.

Upvotes: 67

Debbie Kurth

Reputation: 481

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

Upvotes: 0

MichaelC

Reputation: 231

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>

Upvotes: 2

Katie Cunningham

Reputation: 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

Upvotes: -1