html - Unordered List height 100% not fitting to height of parent div -
i have unordered list inside of div (using bootstrap panel). div set 100% height, , without unordered list inside of it, fill rest of browser window desired. when add unordered list, instead of unordered list filling in parent div , using "overflow-y: scroll" correctly, flows off page of content.
i want unordered list snap height of parent div of content stays on browser window user has scroll inside of unordered list's parent div.
how make unordered list's height snap parent div completely?
<div class="panel panel-default classroompanel"> <div class="panel-heading">choose classroom</div> <div class="panel-body"> <ul class="classroomlist"> <li>sample element</li> <li>sample element</li> <li>sample element</li> <li>sample element</li> <li>sample element</li> <li>sample element</li> </ul> </div> </div>
i have css follows:
.classroompanel { margin: 0 auto; max-width: 500px; } .classroompanel div.panel-body { padding: 0; height: 100%; } ul.classroomlist { height: 100%; overflow-y:scroll; padding: 0; list-style: none; }
maybe try doing this?
ul { list-style-position: inside; }
just careful different browsers; may not work each.
Comments
Post a Comment