CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 4774

Overflow:scroll doesn't show the entire div

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

Upvotes: 8

Views: 11040

Answers (2)

collusionbdbh
collusionbdbh

Reputation: 701

You are setting the size of the div with the class scroll box to 100% of the size of the screen. There header is taking up space on the page so the scroll area is cropped.

If you change the css to:

.scroll-box {
    overflow: scroll;
    height: 91%;
    width: 100%;
    background: #eee;
}

you will be able to see the entire scroll box and all of the values. So you need to distribute the 100% between the header and the scroll

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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/

Upvotes: 4

Related Questions