Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overflow:scroll doesn't show the entire div

Tags:

html

css

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

like image 869
Alex Avatar asked Nov 01 '13 19:11

Alex


People also ask

How do I make my Div overflow scroll?

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;.

Why overflow is not working in CSS?

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.

How do I show scroll only when overflow?

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 ).

How do I fix the overflow in CSS?

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.


1 Answers

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/

like image 52
DaniP Avatar answered Sep 23 '22 12:09

DaniP