twitter-bootstrap 使无序列表可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29793160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making unordered list scrollable
提问by user1692342
I have an unordered list which is inside a div tag and initially the list is empty. When items are added on to it, it will expand and I want it to be scroll-able once it the length of the list exceeds that of the web page, i.e I do not want the web page to scroll, I want only the unordered list to scroll. However currently, the scroll bar for my unordered list is not appearing.
我有一个 div 标签内的无序列表，最初该列表是空的。当项目添加到它时，它会扩展，一旦列表的长度超过网页的长度，我希望它可以滚动，即我不希望网页滚动，我只想要无序的要滚动的列表。但是目前，我的无序列表的滚动条没有出现。
My html code is:
我的 html 代码是：
<div style="width: 25%; float: right; " class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
<ul id="ListOfOnlineUsers" style="overflow: auto;height:100%; word-wrap: break-word;" class="list-group">
</ul>
</div>
</div>
</div>
My CSS code is
我的 CSS 代码是
html{
height: 100%
}
{
margin: 0;
padding: 0;
}
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
height: 100%;
}
a {
color: #00B7FF;
}
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
/*margin-left: 60px;*/
}
.chat li.right .chat-body
{
/*()margin-right: 60px;*/
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
word-wrap: break-word;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
/*margin-right: 5px;*/
}
.panel-body
{
overflow-y: scroll;
top: 1em;
left: 1em;
height: 250px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/* CSS used here will be applied after bootstrap.css */
body, html {
height: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(rgb(154, 145, 162), rgb(12, 97, 33));
}
.card-container.card {
width: 350px;
padding: 40px 40px;
}
.card {
background-color: #F7F7F7;
/* just in case there no content*/
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
/* shadows and rounded borders */
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.btn {
font-weight: 700;
height: 36px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
.form-signin input[type=text],
.form-signin button {
width: 100%;
display: block;
margin-bottom: 10px;
z-index: 1;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn.btn-signin:hover,
.btn.btn-signin:active,
.btn.btn-signin:focus {
background-color: rgb(12, 97, 33);
}
回答by Shaggy
Set the list's max-heightto the height of its parent (or whatever you need it to be) and then set its overflowproperty to auto.
将列表的max-height高度设置为其父级（或任何您需要的高度），然后将其overflow属性设置为auto.
Here's a quick example:
这是一个快速示例：
div{
border:1px solid #000;
font-family:arial;
height:100px;
width:200px;
}
ul{
list-style:none;
max-height:100px;
margin:0;
overflow:auto;
padding:0;
text-indent:10px;
}
li{
line-height:25px;
}
li:nth-child(even){
background:#ccc;
}<div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>回答by Joel Almeida
You can change the height of the ulto max-height: 100vh, that way the ulwill always have the size of the viewport.
您可以将 的高度更改ul为max-height: 100vh，这样ul将始终具有视口的大小。
For browser support check this : http://caniuse.com/#search=vh
对于浏览器支持，请检查：http: //caniuse.com/#search=vh
In case you want it inside a divthat doesn't have the viewport height, follow @Shaggy answer.
如果您希望它在div没有视口高度的 a 中，请按照@Shaggy 的回答进行操作。
回答by Aru
Try to add a wrapper and set max-heightto the wrapper
尝试添加包装器并设置max-height为包装器
Html
html
<div class="listWrapper">
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
Css
css
ul, li {
list-style:none;
padding:0;
margin:0;
}
.listWrapper {
max-height:100px;
overflow-y:auto;
}
回答by Andreas M.
You have the right CSS properties defined for class .panel-bodybut you do not use it in your HTML yet. Move the <ul>into a separate div with the class .panel-body. That should do the trick:
您已经为类定义了正确的 CSS 属性，.panel-body但您还没有在 HTML 中使用它。将 移动<ul>到带有 class 的单独 div 中.panel-body。这应该够了吧：
<div style="width: 25%; float: right; " class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
</div>
<div class="panel-body">
<ul id="ListOfOnlineUsers" style="height:100%; word-wrap: break-word;" class="list-group">
</ul>
</div>
</div>
</div>
Edit: You should drop the overflow: autofrom the <ul>or you get double scroll bars
编辑：你应该overflow: auto从<ul>或者你得到双滚动条
Edit2: Yet another optimization: set margin: 0for the <ul>and change the the .panel-bodyto overflow: auto, so the div's scroll bar is only visible if needed. See my fiddle
Edit2：另一个优化：设置margin: 0为 并将 the<ul>更改.panel-body为overflow: auto，因此 div 的滚动条仅在需要时可见。看我的小提琴
回答by Jeff
With height set to 100% your container will not display scrollbars.
高度设置为 100% 时，您的容器将不会显示滚动条。
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
.panel {
width: 200px;
}
.list-group {
overflow: auto;
height: 200px;
}<div class="online_users">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Online Users
<ul id="ListOfOnlineUsers" class="list-group">
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
<li>some item</li>
</ul>
</div>
</div>
</div>回答by user7212232
No need for the outer div (NOTE this is for horizontal scrollbars. Just change max-width to max-height and overflow-x to overflow-y
不需要外部 div（注意这是用于水平滚动条。只需将 max-width 更改为 max-height 并将 overflow-x 更改为 overflow-y
ul, li {
list-style:none;
padding:0;
margin:0;
white-space:nowrap;
max-width:300px;
}
ul{overflow-x:scroll;}
