Css 如何使长引导下拉菜单垂直滚动?
我得到了以下响应站点,以便在所有设备上以我希望的方式工作。唯一剩下的问题是使下拉菜单可滚动,这样当下拉菜单中的选项数量超出设备屏幕上的显示范围时,就可以滚动了 这些下拉菜单用于在开发过程中滚动,如本例所示()。但是,由于我需要添加固定高度等,以获得这种设计的方式,它有许多下拉菜单不可滚动如何在保留站点当前功能(即页脚保持不变)的同时恢复此可滚动功能? 以下是它在智能手机和计算机视图中的外观: 智能手机: 计算机: 您可以在此处查看此测试站点: 您可以在此处下载代码: 以下是HTML:Css 如何使长引导下拉菜单垂直滚动?,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我得到了以下响应站点,以便在所有设备上以我希望的方式工作。唯一剩下的问题是使下拉菜单可滚动,这样当下拉菜单中的选项数量超出设备屏幕上的显示范围时,就可以滚动了 这些下拉菜单用于在开发过程中滚动,如本例所示()。但是,由于我需要添加固定高度等,以获得这种设计的方式,它有许多下拉菜单不可滚动如何在保留站点当前功能(即页脚保持不变)的同时恢复此可滚动功能? 以下是它在智能手机和计算机视图中的外观: 智能手机: 计算机: 您可以在此处查看此测试站点: 您可以在此处下载代码: 以下是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>
/*页面级CSS*/
试验场地
-
测试页
这是一个测试页面,显示菜单如何延伸到远远超过屏幕底部的位置。
输入文本
3线线路线路(3线)3线线路、5线线路、5线线路、5线线路线路、5线线路线路线路、5线线路线路线路、0线线路线路、0线线线路、0线线线路线路、0线线线路、0线线线路、0线线线路、0线线线线、0线线线、0线线线、0线、5线线线线、0线、5线线线、0线线、0线线线、0线、0线、5线线线、5线线、7线、7线线线、7线线、线、线、7线、线、线、线、8线、8线、线线、线、线、线、线、线、线、线、线、线、线、线、线、线、线、线、线、线、线、8线、8线、线、线、线、线、线、8线、5线、线、线、线、线、线、线、线、线、线、线、线、线、23线#24线#25线#26线#27线#28线#29线#30线#31线#32线#34线#35线#36线#38线#39线#40线##44线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、45线、行行行行行行行行行行行行行行行行行行行行行行行行行行行、47线、47线、行行行行行行行行行行行行行行、行行行行行行行行行行行行行行行行行行行行行行行行行、行行行行行行行行、行行行行行行行、行行、行行行行行行行、行行行行行、行行行行行行行、行68线、69线、70线、72线、73线、75线、76线、77线、78线、79线、80线、81线、83线、84线、85线#87线#88线#89线#90线#91线#92线#93线#94线#95线#96线#97线#98线#99线#100线
页脚
请尝试以下操作:
.dropdown-menu
{
max-height: 200px;
overflow-y: scroll;
}
max height
属性限制最大高度。当外部容器具有固定高度并且在css中具有溢出:滚动
或溢出:自动
时,它将可滚动
因此,移动设备的。下拉菜单
应该有一个固定的高度,这取决于屏幕高度。它可以使用css属性视口高度(这将随设备而改变)来实现最大高度:80vh
(根据您的要求进行更改)。调查一下
因此,将
overflow:auto
和max height:80vh
添加到。下拉菜单
以使其工作。您可以通过在下拉菜单上指定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;
}
同样,如何计算最大高度取决于您的用例 您只需在
ul
标签中添加预滚动即可解决此问题:
<ul class="dropdown-menu pre-scrollable">
谢谢,这是一个很好的简单解决方案,看起来不错,在我的智能手机浏览器和ipad模拟器中具有良好的用户功能:使用overflow-y:auto
而不是overflow-y:scroll
。后者甚至在元素没有溢出时也会显示滚动条(Apple设备除外,在Apple设备上,滚动条从不显示)。谢谢,max height:calc(100vh-50px)
和overflow-y:auto
在我测试过的每台设备上都能完美工作,仅在设备高度需要时显示滚动条:除非您有子菜单,否则此解决方案非常有效。自从