Element using overflow: scroll has scrollbar going off screen

Question

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

#sidebar {
  background-color: white;
  height: 100%;
  width: 20%;
  float: left;
  position: fixed;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
  padding-bottom: 6em;
  overflow-x: scroll;
}

The sidebar has a scroll which moves approximately 50px off the screen, please refer to image provided. I have tried using padding or margin on both body and #sidebar, to no avail.

scroll going off screen

Will Reese · Accepted Answer · 2015-03-10 23:39:05Z

3

Because you have no set height on #sidebar's container, 100% height will be auto. The scrollbar will be the size of it's container (#sidebar) so it will just stretch. Try something like this:

#sidebar {
  top: 0;
  bottom: 0;
}

You could also use window units:

#sidebar {
  height: 100vh;
}

answered Mar 10, 2015 at 23:39

Will Reese

2,8512 gold badges17 silver badges28 bronze badges

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

7 Comments

Nick Tucci Over a year ago

Actually the container does have a set height. Above the sidebar is the header so using top and bottom doesn't work.

Will Reese Over a year ago

So what is your desired height then, the size of the whole body? the size of the window?

Will Reese Over a year ago

Min-height doesn't constitute a set height.

Nick Tucci Over a year ago

I would like the sidebar to take up the rest of page height, only way I have found possible is to make the body height 100% and the sidebar 100%.

Will Reese Over a year ago

the rest of the page height below your page header? if that's the case, then if your page is long the scrollbar will often be partially hidden? or do you mean the rest of the window height? Also, do you know the height of your header?

|

Collectives™ on Stack Overflow

Element using overflow: scroll has scrollbar going off screen

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related