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.
Instead of overflow:auto, try overflow-y:auto. Should work like a charm!
i have just added (overflow:scroll;) in (div3) with fixed height.
see the fiddle:- http://jsfiddle.net/fMs67/10/
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
function start() {_x000D_
document.getElementById("textBox1").scrollTop +=5;_x000D_
scrolldelay = setTimeout(function() {start();}, 40);_x000D_
}_x000D_
_x000D_
function stop(){_x000D_
clearTimeout(scrolldelay);_x000D_
}_x000D_
_x000D_
function reset(){_x000D_
var loc = document.getElementById("textBox1").scrollTop;_x000D_
document.getElementById("textBox1").scrollTop -= loc;_x000D_
clearTimeout(scrolldelay);_x000D_
}_x000D_
//adjust height of paragraph in css_x000D_
//element textbox in div_x000D_
//adjust speed at scrolltop and start If you put overflow: scroll on a fixed height div, the div will scroll if the contents take up too much space.
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>
Is this what you are wanting?
<body>_x000D_
<div id="div1" style="height: 500px;">_x000D_
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">_x000D_
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>Source: Stackoverflow.com