부트 스트랩 3을 사용하고 있으며 사이드 탐색 안에 주제 목록이 있습니다. 사이드 네비게이션이 길고 아래로 스크롤하기 전에 8 개의 요소를 표시하는 스크롤 바가 사이드 네비게이션 내부에 있도록 만들고 싶습니다.
아래는 제 코드입니다:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation" style="float:left">
<div class="well sidebar-nav">
<ul class="nav">
<li><strong>Select a subject</strong></li>
<li class="active"><a href="#">Maths</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Art and Design</a></li>
<li><a href="#">Drama</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Physics</a></li>
<li><a href="#">Chemistry</a></li>
<li><a href="#">Biology</a></li>
<li><a href="#">Home economics</a></li>
<li><a href="#">Physical Education</a></li>
<li><a href="#">Computing Science</a></li>
<li><a href="#">French</a></li>
<li><a href="#">German</a></li>
<li><a href="#">Mandarin</a></li>
<li><a href="#">Religious Education</a></li>
<li><a href="#">Modern Studies</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Creative computing</a></li>
<li><a href="#">Craft, Design and Technology</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
</div><!--/row-->
아래와 같이 오버플로 옵션을 사용해야 합니다:
.nav{
max-height: 300px;
overflow-y: scroll;
}
표시해야 하는 항목의 양에 따라 높이를 변경합니다.
오버플로 옵션을 사용해야 하지만 다음 매개 변수를 사용해야 합니다:
.nav {
max-height:300px;
overflow-y:auto;
}
콘텐츠가 최대 높이를 초과할 때만 스크롤바가 표시되도록 overflow-y:auto;를 사용합니다.
overflow-y:scroll을 사용하면 콘텐츠가 최대 높이를 초과하는지 여부에 관계없이 모든 .nav에서 스크롤바가 항상 표시됩니다.
아마도 그 반대가 아니라 콘텐츠에 맞게 조정되는 것을 원할 것입니다.
도움이 되었기를 바랍니다.