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

You should choose an answer mate! They spent time for you to reply — MeV
– MeV, Commented Jul 16, 2015 at 8:51

Nathan Wailes · Accepted Answer · 2019-11-07 21:45:11Z

13

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

edited Nov 7, 2019 at 21:45

Nathan Wailes

12.6k10 gold badges77 silver badges118 bronze badges

answered Nov 23, 2013 at 23:25

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MeV Over a year ago

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

Guffa Over a year ago

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

MeV Over a year ago

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

Guffa Over a year ago

@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

Nathan Hinchey Over a year ago

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

|

Gerben van Dijk · Accepted Answer · 2013-11-23 22:57:38Z

-1

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/

answered Nov 23, 2013 at 22:57

Gerben van Dijk

8786 silver badges15 bronze badges

1 Comment

MeV Over a year ago

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

Joel Fernandes · Accepted Answer · 2013-11-23 23:04:29Z

-1

Remove the overflow: hidden; from .container class

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

http://jsfiddle.net/atYpX/

answered Nov 23, 2013 at 23:04

Joel Fernandes

4,8662 gold badges29 silver badges48 bronze badges

2 Comments

MeV Over a year ago

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

Jay Over a year ago

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

Saurabh · Accepted Answer · 2017-02-13 08:57:32Z

-1

i would recommend following

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

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

edited Feb 13, 2017 at 8:57

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

answered Nov 23, 2013 at 23:08

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

1 Comment

MeV Over a year ago

Why would you use an absolute position?

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related