tinyscrollbar does not appear

Question

I'm so confused, I want to make a sidebar with plugin tinyscrollbar, I want "height" of viewport is '100%' but if i change the css then the content is does not appear, can you give me another solution?

This a default code of tinyscrollbar but I change the 'height' of viewport:

#scrollbar1 { 
width: 520px; 
margin: 20px 0 10px; }
#scrollbar1 .viewport { 
width: 500px; 
height: 100%; 
overflow: hidden; 
position: relative; }
#scrollbar1 .overview {
height:100%;
list-style: none; 
position: absolute; 
left: 0; 
top: 0; 
padding: 0; 
margin: 0; }
#scrollbar1 .scrollbar{ 
background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; 
position: relative; 
background-position: 0 0; 
float: right; 
width: 15px;
height:100% }
#scrollbar1 .track { 
background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; 
height: 100%;
width:13px; 
position: relative; 
padding: 0 1px; }
#scrollbar1 .thumb { 
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; 
height: 20px; width: 25px; 
cursor: pointer; 
overflow: hidden; 
position: absolute; 
top: 0; 
left: -5px; }
#scrollbar1 .thumb .end { 
background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; 
overflow: hidden; 
height: 5px; 
width: 25px; }
#scrollbar1 .disable { 
display: none; }
.noSelect { 
user-select: none; 
-o-user-select: none; 
-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; }

What do you want to achieve by setting the height of viewport to 100%? — Foreever

dkellner dkellner · Accepted Answer · 2014-01-05T13:33:31

You can't make it proportional (percent), you'll need a fixed value for it. Use jQuery or something similar to determine the actual height, then use it as a fixed pixel height value. This is the best I can advise. Also, you may need to react on window resizing.

tinyscrollbar does not appear

1 Answers