Css:溢出滚动不起作用

Question

我想将溢出滚动属性放入div中,以便为用户显示滚动条,但它不起作用.

我不知道问题出在哪里.

我的代码在这里:http://fiddle.jshell.net/Gg9dL/

这是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>

这是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;
}

Answer 1

您必须为div设置高度,否则它将扩展到其内容的高度

.listTweets {
    overflow : scroll;
    height: 200px;
}

http://fiddle.jshell.net/Gg9dL/1/

Answer 2

您需要为.listTweets添加显式高度

.listTweets {
    overflow : scroll;
    height: 200px;
}

更新示例:http://fiddle.jshell.net/Gg9dL/3/