Make only certain section of the div as scrollable - html

Question

I have a query about CSS and I am having a hard time trying to figure it out.
Here is the HTML:
<div class='a'>
<div class='b'>
</div>
<div class='c'>
<div>
</div>
For e.g. I have a div with a class 'a'. I want this entire div to be scrollable if it overflows. In addition, I want the div with the class 'c' to scroll, but I want the div with the class 'b' to remain fixed on the page. It should show up at the same location even if the scrolling is provided for other divs.
Can someone let me know of a way, if there is one?

Answer 1

Unsure what sort of layout you are wanting, but you are looking to use overlow-y:scroll; in your css. Your div that you want to be scrollable, needs to have a specific height affixed to it.
I created an example that has .a scrollable and .c is as well. .b will stay at the top, UNLESS you scroll too far down in .a.
If you are wanting .b to be visible even when you scroll down in .a, then you'll have to do some non-intuitive positioning with position:fixed.
JSFiddle example
<style media="screen">
.a{
height: 200px;
overflow-y: scroll;
border: 1px solid black;
}
.b {
margin: 10px;
border: 1px solid blue;
}
.c {
height: 150px;
overflow-y: scroll;
background: #ddd;
}
</style>
<div class='a'>
<div class='b'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
</div>
<div class='c'>
eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br> consequat. Duis aute irure dolor in<br> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class='d'>
eiusmod <br> tempor incididunt <br> ut labore et dolore magna <br> aliqua. <br> <br> Ut enim ad minim veniam, quis <br> nostrud exercitation <br> ullamco laboris nis<br> i ut aliquip ex ea commodo<br> consequat. Duis aute irure dolor in<br> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>