CSS how to make scrollable list

Question

I am trying to create a webpage which is made up of a header and bellow the header a list of items  I want the list of items to be vertically scrollable  I also would like the webpage to take up the entire window but not be bigger  Currently my problem is the list of items is not scrollable and instead extends far below the bottom of the window and this is causing the window to be scrollable  What should the CSS properties be on the html  body  header and list items   doctype html html     head         link href  css style css  rel  stylesheet       body         div wrapper             h1 Interactive Contact Directory             div class  tools                    Search                   br                 input type  text  id  searchBox                   select name  searchBy  id  searchBy                       option value  firstname   First Name                     option value  lastname   Last Name                     option value  email   Email                 br                 br             div id  listingHolder                   ul id  listing               div id  listingView     Bellow is the current style sheet I have  html      height  100     body       background  121212      margin 0px      padding 0px      font-family  Open Sans   sans-serif      height  100      wrapper       max-height  100     h1       margin 0px      color  fff      padding 20px      text-align center      font-weight 100     tools       text-align center      color  fff     searchBox       padding 7px      border none      border-radius 5px      font-size 1 2em    a filter       display inline-block      padding 5px 10px      margin 5px      background  0472C0      color  fff      text-decoration none      border-radius 3px    a filter hover       background  0B9DE0      color  fff    ul listing       list-style none      padding 0px      margin 0px      background  fff      width 100     ul listing li       list-style none      border-bottom 1px solid  eee      display block    ul listing li  list-header       padding 10px      cursor pointer      display block     ul listing li  list-header hover       background  7893AB      color  fff    ul listing li  list-header active       background  447BAB      color  fff    ul listing li  details       display none      background  efefef      padding 20px      font-size 0 9em     listingHolder      width  50       overflow  scroll

User · Answer

Another solution would be as below where the list is placed under a drop-down button      lt button class  btn dropdown-toggle btn-primary btn-sm  data-toggle  dropdown       gt Markets lt span class  caret  gt  lt  span gt  lt  button gt        lt ul class  dropdown-menu   style  height 40   overflow hidden  overflow-y scroll   gt           form markets         lt  ul gt

User · Answer

As per your question vertical listing have a scrollbar effect   CSS   HTML    x000D   x000D  nav ul height 200px  width 18    x000D  nav ul overflow hidden  overflow-y scroll   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D       lt head gt  x000D           lt meta charset  utf-8  gt  x000D           lt title gt JS Bin lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D           lt header gt header area lt  header gt  x000D           lt nav gt  x000D               lt ul gt  x000D                   lt li gt Link 1 lt  li gt  x000D                   lt li gt Link 2 lt  li gt  x000D                   lt li gt Link 3 lt  li gt  x000D                   lt li gt Link 4 lt  li gt  x000D                   lt li gt Link 5 lt  li gt  x000D                   lt li gt Link 6 lt  li gt   x000D                   lt li gt Link 7 lt  li gt   x000D                   lt li gt Link 8 lt  li gt  x000D                   lt li gt Link 9 lt  li gt  x000D                   lt li gt Link 10 lt  li gt  x000D                   lt li gt Link 11 lt  li gt  x000D                   lt li gt Link 13 lt  li gt  x000D                   lt li gt Link 13 lt  li gt  x000D   x000D               lt  ul gt  x000D           lt  nav gt  x000D           x000D           lt footer gt footer area lt  footer gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

[html] CSS how to make scrollable list

Examples related to html

Examples related to css

Examples related to pug