title: How to make long Bootstrap dropdown menus vertically scrollable?
body: <p>I got the following responsive site to work the way I want it on all devices. The only remaining problem is <strong>to make the drop down menu scrollable</strong> so that when the number of options in the dropdown menu is more than can fit on the device's screen, there is a way to scroll it.</p>
  
  <p>These dropdown menus used to scroll during development of this as in this example (<a href="http://tanguay.info/testmenu2" rel="nofollow noreferrer">http://tanguay.info/testmenu2</a>). But since I needed to add fixed heights etc. to get this design the way it is, it has many these these dropdown menus unscrollable. <strong>How can I get this scrollable functionality back while keeping the current functionality of the site, i.e. with footer that stays in place?</strong></p>
  
  <p>Here is how it looks in Smartphone and Computer views:</p>
  
  <p><strong>Smartphone:</strong>
  <a href="https://i.stack.imgur.com/l4B6e.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l4B6e.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Computer:</strong>
  <a href="https://i.stack.imgur.com/UPamb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UPamb.jpg" alt="enter image description here"></a></p>
  
  <p>You can view this test site here: <a href="http://tanguay.info/testmenu" rel="nofollow noreferrer">http://tanguay.info/testmenu</a></p>
  
  <p>You can download the code here: <a href="http://tanguay.info/testmenu/testmenu.zip" rel="nofollow noreferrer">http://tanguay.info/testmenu/testmenu.zip</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;       
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_custom_extensions.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_override.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/system_navbarResponsiveSite.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/system_reset.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/system_developer.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/system_main.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/custom_main.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/font-awesome.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="index_fichiers/lt.css"&gt;
          &lt;script src="index_fichiers/jquery-2.js"&gt;&lt;/script&gt;
          &lt;script src="index_fichiers/bootstrap.js"&gt;&lt;/script&gt;
          &lt;script src="index_fichiers/qtools.js"&gt;&lt;/script&gt;
          &lt;script src="index_fichiers/system_main.js"&gt;&lt;/script&gt;
          &lt;script src="index_fichiers/angular.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
              /*  page-level CSS */
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
                  &lt;div class="container-fluid"&gt;                    
                      &lt;div class="navbar-header pull-left"&gt;
                          &lt;div class="navHeaderArea"&gt;
                              &lt;div class="theUser" onclick="location.href = '?';"&gt;The Test Site&lt;/div&gt;
                              &lt;div class="clear"&gt;&lt;/div&gt;                
                          &lt;/div&gt;
                      &lt;/div&gt;    
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li class="dropdown pull-right active"&gt;
                              &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;MENU&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #2&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #3&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #4&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #5&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #6&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #7&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #8&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #9&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #10&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #11&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #12&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #13&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #14&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #15&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #16&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #17&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #18&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #19&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Test Page #20&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;                            
                          &lt;/li&gt;
                      &lt;/ul&gt;                
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;div class="pageContent"&gt;&lt;div ng-app="mainModule" ng-controller="mainController" class="angular-hide-during-page-load ng-scope"&gt;
                      &lt;h1 class="showcaseTitle"&gt;Test Page&lt;/h1&gt;
                      &lt;div class="showcaseDescription"&gt;This is a test page that shows how the menu extends to far past the bottom of the screen.&lt;/div&gt;
                      &lt;div class="panel panel-primary"&gt;
                          &lt;div class="panel-heading ng-binding"&gt;Input Text&lt;/div&gt;
                          &lt;div class="panel-body"&gt;
  
                              &lt;div&gt;line #0&lt;/div&gt;&lt;div&gt;line #1&lt;/div&gt;&lt;div&gt;line #2&lt;/div&gt;&lt;div&gt;line #3&lt;/div&gt;&lt;div&gt;line #4&lt;/div&gt;&lt;div&gt;line #5&lt;/div&gt;&lt;div&gt;line #6&lt;/div&gt;&lt;div&gt;line #7&lt;/div&gt;&lt;div&gt;line #8&lt;/div&gt;&lt;div&gt;line #9&lt;/div&gt;&lt;div&gt;line #10&lt;/div&gt;&lt;div&gt;line #11&lt;/div&gt;&lt;div&gt;line #12&lt;/div&gt;&lt;div&gt;line #13&lt;/div&gt;&lt;div&gt;line #14&lt;/div&gt;&lt;div&gt;line #15&lt;/div&gt;&lt;div&gt;line #16&lt;/div&gt;&lt;div&gt;line #17&lt;/div&gt;&lt;div&gt;line #18&lt;/div&gt;&lt;div&gt;line #19&lt;/div&gt;&lt;div&gt;line #20&lt;/div&gt;&lt;div&gt;line #21&lt;/div&gt;&lt;div&gt;line #22&lt;/div&gt;&lt;div&gt;line #23&lt;/div&gt;&lt;div&gt;line #24&lt;/div&gt;&lt;div&gt;line #25&lt;/div&gt;&lt;div&gt;line #26&lt;/div&gt;&lt;div&gt;line #27&lt;/div&gt;&lt;div&gt;line #28&lt;/div&gt;&lt;div&gt;line #29&lt;/div&gt;&lt;div&gt;line #30&lt;/div&gt;&lt;div&gt;line #31&lt;/div&gt;&lt;div&gt;line #32&lt;/div&gt;&lt;div&gt;line #33&lt;/div&gt;&lt;div&gt;line #34&lt;/div&gt;&lt;div&gt;line #35&lt;/div&gt;&lt;div&gt;line #36&lt;/div&gt;&lt;div&gt;line #37&lt;/div&gt;&lt;div&gt;line #38&lt;/div&gt;&lt;div&gt;line #39&lt;/div&gt;&lt;div&gt;line #40&lt;/div&gt;&lt;div&gt;line #41&lt;/div&gt;&lt;div&gt;line #42&lt;/div&gt;&lt;div&gt;line #43&lt;/div&gt;&lt;div&gt;line #44&lt;/div&gt;&lt;div&gt;line #45&lt;/div&gt;&lt;div&gt;line #46&lt;/div&gt;&lt;div&gt;line #47&lt;/div&gt;&lt;div&gt;line #48&lt;/div&gt;&lt;div&gt;line #49&lt;/div&gt;&lt;div&gt;line #50&lt;/div&gt;&lt;div&gt;line #51&lt;/div&gt;&lt;div&gt;line #52&lt;/div&gt;&lt;div&gt;line #53&lt;/div&gt;&lt;div&gt;line #54&lt;/div&gt;&lt;div&gt;line #55&lt;/div&gt;&lt;div&gt;line #56&lt;/div&gt;&lt;div&gt;line #57&lt;/div&gt;&lt;div&gt;line #58&lt;/div&gt;&lt;div&gt;line #59&lt;/div&gt;&lt;div&gt;line #60&lt;/div&gt;&lt;div&gt;line #61&lt;/div&gt;&lt;div&gt;line #62&lt;/div&gt;&lt;div&gt;line #63&lt;/div&gt;&lt;div&gt;line #64&lt;/div&gt;&lt;div&gt;line #65&lt;/div&gt;&lt;div&gt;line #66&lt;/div&gt;&lt;div&gt;line #67&lt;/div&gt;&lt;div&gt;line #68&lt;/div&gt;&lt;div&gt;line #69&lt;/div&gt;&lt;div&gt;line #70&lt;/div&gt;&lt;div&gt;line #71&lt;/div&gt;&lt;div&gt;line #72&lt;/div&gt;&lt;div&gt;line #73&lt;/div&gt;&lt;div&gt;line #74&lt;/div&gt;&lt;div&gt;line #75&lt;/div&gt;&lt;div&gt;line #76&lt;/div&gt;&lt;div&gt;line #77&lt;/div&gt;&lt;div&gt;line #78&lt;/div&gt;&lt;div&gt;line #79&lt;/div&gt;&lt;div&gt;line #80&lt;/div&gt;&lt;div&gt;line #81&lt;/div&gt;&lt;div&gt;line #82&lt;/div&gt;&lt;div&gt;line #83&lt;/div&gt;&lt;div&gt;line #84&lt;/div&gt;&lt;div&gt;line #85&lt;/div&gt;&lt;div&gt;line #86&lt;/div&gt;&lt;div&gt;line #87&lt;/div&gt;&lt;div&gt;line #88&lt;/div&gt;&lt;div&gt;line #89&lt;/div&gt;&lt;div&gt;line #90&lt;/div&gt;&lt;div&gt;line #91&lt;/div&gt;&lt;div&gt;line #92&lt;/div&gt;&lt;div&gt;line #93&lt;/div&gt;&lt;div&gt;line #94&lt;/div&gt;&lt;div&gt;line #95&lt;/div&gt;&lt;div&gt;line #96&lt;/div&gt;&lt;div&gt;line #97&lt;/div&gt;&lt;div&gt;line #98&lt;/div&gt;&lt;div&gt;line #99&lt;/div&gt;&lt;div&gt;line #100&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="pageFooter"&gt;
                  &lt;div class="page_Footer_left"&gt;The Footer&lt;/div&gt;
                  &lt;div class="page_Footer_right"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>