Html CSS：溢出滚动不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20887300/
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
Css: overflow scroll doesn't work
提问by wawanopoulos
I am tring to put overflow scroll property into a div, in order to show a scroll bar for the user, but it doesn't work.
我想将溢出滚动属性放入 div，以便为用户显示滚动条，但它不起作用。
I don't know where is the problem.
我不知道问题出在哪里。
My code is here : http://fiddle.jshell.net/Gg9dL/
我的代码在这里：http: //fiddle.jshell.net/Gg9dL/
Here is the HTML :
这是 HTML ：
<div class="col">
<div class="box-5">
<div class="box-menu">
<img src="src/ui_dashboard/img/ic_action_twitter.png" id="imgIntoMenu"><span id="textMenu">Tweets from</span>
<div class="listTweets">
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
<div class="tweetItem" id="tweetItem">toto</div>
</div>
</div>
</div>
</div>
And here is the CSS :
这是 CSS ：
.col {
float: left;
width: 33%;
margin: 0;
padding: 0;
}
.containerBloc {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
margin-top: 280px;
}
.box-1,.box-2,.box-3,.box-4 {
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
}
.box-1,.box-2 {
height: 200px;
}
.box-1,.box-3 {
width: 98%;
height: 350px;
}
.box-2,.box-4 {
width: 98%;
height: 200px;
}
.box-5 {
margin: 1%;
min-height: 150px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #FFFFFF;
border: 1px solid #B0B0B0;
float: right;
height: 204px;
width: 98%;
}
.box-menu {
background-color: #EFEFEF;
height: 40px;
color: #B0B0B0;
border-bottom: 1px solid #B0B0B0;
}
#imgIntoMenu {
margin-left: 10px;
margin-top: 4px;
}
#textMenu {
margin-left: 10px;
position: absolute;
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 11pt;
}
.tweetItem{
background-color: blue;
margin-top: 2px;
margin-left: 2px;
margin-right: 2px;
height: 70px;
}
.listTweets {
overflow : scroll;
}
回答by Musa
You have to set a height to the div or else it will expand to the height of its contents
您必须为 div 设置高度，否则它将扩展到其内容的高度
.listTweets {
overflow : scroll;
height: 200px;
}
回答by veddermatic
You need to add an explicit height to your .listTweets
您需要为您的 .listTweets 添加一个明确的高度
.listTweets {
overflow : scroll;
height: 200px;
}
Updated example: http://fiddle.jshell.net/Gg9dL/3/
回答by Michal
Overflow: hidden hides everything outside of visible area. Use overflow:scroll to display the scrollbars. If you want a specific scrollbar to display, use overflow-x or overflow-y.
溢出：隐藏隐藏可见区域之外的所有内容。使用 overflow:scroll 显示滚动条。如果要显示特定的滚动条，请使用溢出-x 或溢出-y。
