DIV set to overflow:scroll, but wont scroll all the way to bottom

Question

I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.

I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.

Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.

Why cant I scroll all the way to the bottom? What is the solution?

Sample here: http://jsfiddle.net/D5KU3/2/

<div class="container">

<!--header-->
 <div class="header">
 </div>
<!--end header-->

<!--left-->
 <div class="left">

<!--ul starts here-->

  <ul>

  <li class="hybrid">

    <a href="#">
    <p class="title">Why Cant</p>
    <p class="type">I scroll all the way to the bottom</p></a>

  </li>

Repeat li 20 times

  </ul> <!--ul ends here-->

  </div> <!--container ends here-->

CSS

  body, html {
  height:100%;  
  }

  body {
  background:white;

  }

  .container {
  width:260px;
  height:100%;
  overflow:hidden;
  background:silver;
  margin:0 auto;
  font-family:sintony;
  }

  .header {
  width:100%;
  height:60px;
  background:#000;
  }

  .left {
  width:260px;
  height:100%;
  background:#fff;
  float:left;
  overflow:scroll;
  }


 li.hybrid a {
 display:block;
 background:#16BF14;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }



 li.purple a {
 display:block;
 background:#3370CC;
 height:60px;
 width:260px;
 text-decoration:none;
 position:relative;
 }

 p.title {
 position:relative;
 padding-left:10px;
 }

 p.type {
 font-size:12px;
 position:relative;
 padding-left:10px;
 }

 ul {
 margin:0;
 padding:0;
 }

 li p {
 margin:0;
 padding:0;
 list-style-type:none;
 }

Delight

You should choose an answer mate! They spent time for you to reply – Weigh

Answer 1

As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.

You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:

.container {
    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    padding-top: 60px;
}

.header {
    margin-top: -60px;
}

Demo: http://jsfiddle.net/Guffa/D5KU3/11/

You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:

body {
    margin: 0;
    padding: 0;
}

Idel

Great solution. You saved me...! Thanks. But, to be honest, I don't understand how can this work. – Weigh

@MaRco85: By changing the box-sizing you can set the height to 100% while still have a padding. The padding will reduce the area inside the container where a scrolling element can be placed, and the header can be placed in the room created by the padding so that it doesn't interfer with the scrolling element. – Idel

Oh, I have forgot, the right attribute name is: "box-sizing: border-box;" you can correct your answer maybe :-) - Thanks for explanation anyway. Need to study that for sure – Weigh

@MaRco85: It's a different value, not a typo.padding-box and border-box differ in whether the border is inlcuded. developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – Idel

border-box is now the widely accepted standard, and padding-box is deprecated. – Treenware

You're a wizard, Guffa! – Hose

Answer 2

It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.

If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.

An updates jsfiddle: http://jsfiddle.net/D5KU3/3/

Quiteris

Wrong. Cause in his case he does not want to exceed the height of the page (100%). – Weigh

Answer 3

Remove the overflow: hidden; from .container class

.container {
  width:260px;
  height:100%;
  background:silver;
  margin:0 auto;
  font-family:sintony;
}

http://jsfiddle.net/atYpX/

Budde

The problem is not this. We don't want to exceed the 100% height of the page so hiding the overflow is fine. – Weigh

This was definitely my problem. My global style had overflow:hidden. – Retha

Answer 4

i would recommend following

.left {
  position:absolute;
  width:260px;
  top:60px;
  height:100%;
  background:#fff; 
  overflow:scroll;  
}

http://jsfiddle.net/D5KU3/8/

Okeechobee

Why would you use an absolute position? – Weigh