I'm trying to make a fixed position sidebar, which has a small header and a scrollable div underneath.
My problem is that I cannot scroll through the entire div, so I can't see everything in it.
Here's my code and here it is on jsfiddle.
HTML
<section>
<header>we have some text here
<br>a few lines
<br>doesn't matter
<br>
</header>
<div class="scroll-box">FIRST LINE
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>doesn't matter
<br>we have some text here
<br>a few lines
<br>LAST LINE
<br>
</div>
CSS
section {
position: fixed;
top:0;
left: 0;
height: 100%;
width: 300px;
background: red;
}
.scroll-box {
overflow: scroll;
height: 100%;
width: 100%;
background: #eee;
}
Thanks
Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;.
One of the most common causes of overflow is fixed-width elements. Generally speaking, don't fix the width of any element that should work at multiple viewport sizes.
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
overflow: scroll Setting the value to scroll , the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it): You can use the overflow property when you want to have better control of the layout.
The issue is here:
.scroll-box {
height:100%;
}
You can't set the height
to 100% because yo also have a header in the section that takes space.
Distribute the total 100% to the header
and the .scroll-box
section header{
height:30%;
}
.scroll-box {
overflow: auto;
height:70%;
background: #eee;
}
View the demo http://jsfiddle.net/9V45d/8/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With