css - Vertical scrolling will not scroll to end of list -


i trying achieve vertical scroll. reason won't scroll way end of list.

i working angular

here codepen of code example -> http://codepen.io/gy22/pen/pqeozv

html code:

<!-- start sidebar --> <div id="sidebar" ng-app="dragdrop" ng-controller="appctrl">   <ul>     <li ng-repeat="user in users" class="circular">       <p class="initials">{{user.initials}}</p>     </li>   </ul> </div> <!-- end sidebar --> 

css code:

#sidebar {   position: fixed;   width: 120px;   height: 900px;   background-color: #03a9f4;   z-index: 33;   margin-top: 0px;   overflow-y: scroll;   overflow-x: hidden;   margin-bottom: 100px }  #userlist {   padding-bottom: 10px !important; }  ul li {   margin-left: -22px;   list-style-type: none; }  .circle {   border-radius: 50%;   width: 25px;   height: 25px;   background-color: hotpink; }  .initials {   margin-left: 25px;   padding-top: 30px;   font-weight: bold;   font-size: 18px; } 

angular code:

var contenteditor = angular.module("dragdrop", []);  contenteditor.controller('appctrl', function($scope) {    $scope.users = [{     initials: 'gy'   }, {     initials: 'xx'   }, {     initials: 'kk'   }, {     initials: 'tt'   }, {     initials: 'aa'   }, {     initials: 'qq'   }, {     initials: 'pp'   }, {     initials: 'ss'   }, {     initials: 'mm'   }, {     initials: 'rs'   }, {     initials: 'kl'   }, {     initials: 'cj'   }, {     initials: 'rt'   }, {     initials: 'dj'   }, {     initials: 'xg'   }, {     initials: 'xx'   }];  }); 

change height of #sidebar 100% instead of fixed height.


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -