私は非常に混乱しています。tinyscrollbar プラグインでサイドバーを作成したいのですが、ビューポートの「高さ」を「100%」にしたいのですが、CSS を変更するとコンテンツが表示されません。別の解決策を教えてください。
これは tinyscrollbar のデフォルト コードですが、ビューポートの「高さ」を変更します。
#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; }