如何使長Bootstrap下拉菜單可垂直滾動？

我得到了以下響應站點，以便在所有設備上以我想要的方式工作。剩下的唯一問題是使下拉菜單可滾動，這樣當下拉菜單中的選項數量超過設備屏幕上的選項數量時，就可以滾動該選項。如何使長Bootstrap下拉菜單可垂直滾動？

這些下拉菜單用於在開發過程中進行滾動，如本例（http://tanguay.info/testmenu2）。但是因爲我需要添加固定的高度來按照它的方式來設計這個設計，所以它有許多這些下拉菜單是不可滾動的。 如何在保持網站當前功能的同時返回此可滾動功能，即使用保留的頁腳？

下面是它的外觀在智能手機和計算機訪問量：

智能手機：

計算機：

你可以在這裏查看該試驗場：http://tanguay.info/testmenu

你可以在這裏下載代碼：http://tanguay.info/testmenu/testmenu.zip

下面是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1">  
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_custom_extensions.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/bootstrap_override.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_navbarResponsiveSite.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_reset.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_developer.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/system_main.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/custom_main.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/font-awesome.css"> 
     <link rel="stylesheet" type="text/css" href="index_fichiers/lt.css"> 
     <script src="index_fichiers/jquery-2.js"></script> 
     <script src="index_fichiers/bootstrap.js"></script> 
     <script src="index_fichiers/qtools.js"></script> 
     <script src="index_fichiers/system_main.js"></script> 
     <script src="index_fichiers/angular.js"></script> 
     <style type="text/css"> 
      /* page-level CSS */ 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <nav class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="container-fluid">      
        <div class="navbar-header pull-left"> 
         <div class="navHeaderArea"> 
          <div class="theUser" onclick="location.href = '?';">The Test Site</div> 
          <div class="clear"></div>     
         </div> 
        </div>  
        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown pull-right active"> 
          <a href="#" data-toggle="dropdown" class="dropdown-toggle">MENU</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Test Page #1</a></li> 
           <li><a href="#">Test Page #2</a></li> 
           <li><a href="#">Test Page #3</a></li> 
           <li><a href="#">Test Page #4</a></li> 
           <li><a href="#">Test Page #5</a></li> 
           <li><a href="#">Test Page #6</a></li> 
           <li><a href="#">Test Page #7</a></li> 
           <li><a href="#">Test Page #8</a></li> 
           <li><a href="#">Test Page #9</a></li> 
           <li><a href="#">Test Page #10</a></li> 
           <li><a href="#">Test Page #11</a></li> 
           <li><a href="#">Test Page #12</a></li> 
           <li><a href="#">Test Page #13</a></li> 
           <li><a href="#">Test Page #14</a></li> 
           <li><a href="#">Test Page #15</a></li> 
           <li><a href="#">Test Page #16</a></li> 
           <li><a href="#">Test Page #17</a></li> 
           <li><a href="#">Test Page #18</a></li> 
           <li><a href="#">Test Page #19</a></li> 
           <li><a href="#">Test Page #20</a></li> 
          </ul>        
         </li> 
        </ul>     
       </div> 
      </nav> 
      <div class="pageContent"><div ng-app="mainModule" ng-controller="mainController" class="angular-hide-during-page-load ng-scope"> 
        <h1 class="showcaseTitle">Test Page</h1> 
        <div class="showcaseDescription">This is a test page that shows how the menu extends to far past the bottom of the screen.</div> 
        <div class="panel panel-primary"> 
         <div class="panel-heading ng-binding">Input Text</div> 
         <div class="panel-body"> 

          <div>line #0</div><div>line #1</div><div>line #2</div><div>line #3</div><div>line #4</div><div>line #5</div><div>line #6</div><div>line #7</div><div>line #8</div><div>line #9</div><div>line #10</div><div>line #11</div><div>line #12</div><div>line #13</div><div>line #14</div><div>line #15</div><div>line #16</div><div>line #17</div><div>line #18</div><div>line #19</div><div>line #20</div><div>line #21</div><div>line #22</div><div>line #23</div><div>line #24</div><div>line #25</div><div>line #26</div><div>line #27</div><div>line #28</div><div>line #29</div><div>line #30</div><div>line #31</div><div>line #32</div><div>line #33</div><div>line #34</div><div>line #35</div><div>line #36</div><div>line #37</div><div>line #38</div><div>line #39</div><div>line #40</div><div>line #41</div><div>line #42</div><div>line #43</div><div>line #44</div><div>line #45</div><div>line #46</div><div>line #47</div><div>line #48</div><div>line #49</div><div>line #50</div><div>line #51</div><div>line #52</div><div>line #53</div><div>line #54</div><div>line #55</div><div>line #56</div><div>line #57</div><div>line #58</div><div>line #59</div><div>line #60</div><div>line #61</div><div>line #62</div><div>line #63</div><div>line #64</div><div>line #65</div><div>line #66</div><div>line #67</div><div>line #68</div><div>line #69</div><div>line #70</div><div>line #71</div><div>line #72</div><div>line #73</div><div>line #74</div><div>line #75</div><div>line #76</div><div>line #77</div><div>line #78</div><div>line #79</div><div>line #80</div><div>line #81</div><div>line #82</div><div>line #83</div><div>line #84</div><div>line #85</div><div>line #86</div><div>line #87</div><div>line #88</div><div>line #89</div><div>line #90</div><div>line #91</div><div>line #92</div><div>line #93</div><div>line #94</div><div>line #95</div><div>line #96</div><div>line #97</div><div>line #98</div><div>line #99</div><div>line #100</div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="pageFooter"> 
       <div class="page_Footer_left">The Footer</div> 
       <div class="page_Footer_right"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2016-11-19 Edward Tanguay

您可以通過下拉菜單指定max-height和overflow-y做到這一點：

.dropdown-menu{ 
    max-height: 400px; 
    overflow-y: auto; 
}

可以計算在JS的最大高度，或使用視口單位。例如，如果您希望將下拉框填充到頁面底部，則可以使用：max-height: calc(100vh - 50px)，其中50px是頁眉的高度。

請注意，在上述解決方案中，左側列表將不會獨立於下拉列表進行滾動。一旦你到達下拉菜單的結尾，它將繼續滾動列表。爲了防止這種情況，使面板溢出，以及：

.panel.panel-primary{ 
    max-height: 60vh; 
    overflow-y: auto; 
}

再次，它取決於你的使用情況如何去計算最大高度。

來源

2016-11-19 13:03:08 aandrei

感謝，'max-height：calc（100vh - 50px）''和'overflow-y：auto'在我測試過的每個設備上都能很好地工作，只需要在設備高度需要時顯示一個滾動條：http://tanguay.info/testmenu4 –

請試試這個：

.dropdown-menu 
{ 
    max-height: 200px; 
    overflow-y: scroll; 
    }

的max-height屬性限制的最大高度。

來源

2016-11-19 12:49:06

謝謝，這是一個不錯的，簡單的解決方案，看起來很好，並在我的智能手機瀏覽器和ipad模擬器中具有良好的用戶功能：http://tanguay.info/testmenu3 –

它將滾動當外容器具有固定的高度，並且具有在CSS

overflow:scroll或 overflow:auto

所以.dropdown-menu用於移動設備應該具有取決於屏幕高度的固定高度。它可以實現使用CSS屬性視口高度（這將與設備chage）max-height:80vh（根據你的要求改變這一點）。瞭解更多。

所以加overflow:auto和max-height:80vh到.dropdown-menu使其工作。

來源

2016-11-19 12:49:26 raj

如何使長Bootstrap下拉菜單可垂直滾動？

回答

相關問題