当向下滚动时，div的高度不起作用

Question

我在height: 100%上设置了一个div，但是我有一个包含信息的主内容div，它比侧栏的div更远。

这是它显示的错误，但是我希望黑条- side-bar更长，不管主要内容的大小如何。http://screencloud.net/v/rd9Y (图像)

CSS：

body {
    font-family: Verdana;
    font-size: 11px;
    color: #333;
    background: #e1e0de;
    margin: 0;
    padding: 0;
}


#notification-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;   
    z-index: 1000;
    height: 48px;
    border-bottom: 2px solid #dbdbdb;
    background: #f0f0f0;
    -webkit-box-shadow: 0px 1px 0px #dbdbdb;
    -moz-box-shadow: 0px 1px 0px #dbdbdb;
    box-shadow: 0px 1px 0px #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}


#side-bar { 
    background: #232323;
    color: #656565;
    position:relative;
    height: 100%;
    width: 14%;
    z-index: 1;
    float:left;
}

.side-bar-container {
    margin-top: 60px;
    position: fixed;
}


#container {

}

#main-container {   
    margin: 60px 15px 0;
    float:left;
    width: 83%;
}

.user-stats-container {
    margin-bottom: 25px;
}   

#main-content-box {
    background: #f4f4f4;
    margin: 0 auto 28px;
    position: relative;
    box-shadow: 0 1px 0 0 #656565;
    -moz-box-shadow: 0 1px 0 0 #656565;
    -webkit-box-shadow: 0 1px 0 0 #656565;
    padding: 15px;

}

HTML：

<div id="notification-bar">
                notification bar Swag
            </div>

            <div id="container">

                <div id="side-bar">
                    <div class="side-bar-container">
                        side bar swag
                    </div>
                </div>

                <div id="main-container">

                    <div class="user-stats-container ">

                        user stats swag 

                    </div>

                    <div id="main-content-box">

                        Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>
                        Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>Main content swag<br><br><br><br><br><br>

                    </div>

                </div>

            </div>

我的side-bar设置为100%的高度，但它似乎不想工作。有什么想法吗？

Answer 1

在#container上添加这个css

float: left;

因为侧栏和主容器使用的是float，所以需要包装器才能得到float。