Remove scrollbars from sidebar

Question

I want to remove the scrollbars on my sidebar, you can have a look at this bootply:

http://www.bootply.com/DbyYVRupPJ

I have tried some stuff like this

FIDDLE

#sidebar{
    width: 200px;
    border: 1px solid #000;
    height: 100%;
}

but I can't get it working properly

Anybody able to help me out? :)

Edit: The scroll function should still be active

Answer 1

Use something like the following code:

html, body {
    min-height: 100%;
    height: 100%;
}
#sidebar{
    position: relative;
    width: 200px;
    border: 1px solid #000;
    min-height: 100%;
}
#scroller {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
} 

Fiddle http://jsfiddle.net/qcv5Q/671/ or http://jsfiddle.net/qcv5Q/672/ if you don't want to have visible scrollbar

Answer 2

Add the last propierty "overflow-y: hidden". Or if you want to remove the x-axis so.. overflow-x: hidden.

#sidebar-wrapper {
    margin-left: -250px;
    left: 70px;
    width: 250px;
    background: #222;
    position: fixed;
    height: 100%;
    z-index: 10000;
    transition: all .4s ease 0s;
    overflow-y:hidden;  /* NEW ONE */
}

Or if you want that to adjust to the content you have to write:

overflow-y:auto;