html - 滚动 div 不滚动到内容底部

Question

我有 2 个滚动 div(红色轮廓)，它​​们不会滚动到各自的底部。我似乎无法弄清楚要调整什么来修复它。

粗框是一个模拟的浏览器窗口。

http://jsfiddle.net/jsk55rfb/4/

HTML

<div class="container">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="main">
        <div class="detail-container">
            <div class="top-info"></div>
            <div class="items-container">
                <div class="item blue"></div>
                <div class="item orange"></div>
                <div class="item blue"></div>
                <div class="item orange"></div>
            </div>
        </div>
        <div class="main-container">
            <div class="main-header"></div>
            <div class="main-content">
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    height: 500px;
    width: 500px;
    border: solid 3px black;
    overflow: hidden;
}

.header {
    height: 25px;
    background-color: #333;
    right: 0;
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75px;
    margin-top: 35px;
    border: solid 1px grey;
}

.main {
    height: 100%;
    padding-left: 75px;
}

.main-container {
    width: 65%;
    height: 100%;
}

.main-content {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.main-header {
    height: 20px;
    border: 1px solid black;
}

.detail-container {
    float: right;
    width: 35%;
    height: 100%;
    border: solid 1px grey;
}

.top-info {
    padding: 75px 0;
}

.items-container {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.item {
    padding: 100px 0;
} 

.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }

.content {
    width: 65%;
    height: 100%;
}

Answer 1

您为容器设置了固定高度，并将溢出设置为隐藏。由于 div 超过了该高度，因此无法看到溢出。

试试这个:

.container {
    height: 500px;
    width: 500px;
    border: solid 3px black;
    overflow: scroll;
}

.header {
    height: 25px;
    background-color: #333;
    right: 0;
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75px;
    margin-top: 35px;
    border: solid 1px grey;
}

.main {
    height: 100%;
    padding-left: 75px;
}

.main-container {
    width: 65%;
    height: 100%;
}

.main-content {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.main-header {
    height: 20px;
    border: 1px solid black;
}

.detail-container {
    float: right;
    width: 35%;
    height: 100%;
    border: solid 1px grey;
}

.top-info {
    padding: 75px 0;
}

.items-container {
    height: 100%;
    overflow-y: scroll;
    border: solid 1px red;
}

.item {
    padding: 100px 0;
} 

.blue { background-color: blue; }
.orange { background-color: orange; }
.grey { background-color: grey; }
.purple { background-color: purple; }

.content {
    width: 65%;
    height: 100%;
}

<div class="container">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="main">
        <div class="detail-container">
            <div class="top-info"></div>
            <div class="items-container">
                <div class="item blue"></div>
                <div class="item orange"></div>
                <div class="item blue"></div>
                <div class="item orange"></div>
            </div>
        </div>
        <div class="main-container">
            <div class="main-header"></div>
            <div class="main-content">
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
                <div class="item grey"></div>
                <div class="item purple"></div>
            </div>
        </div>
    </div>
</div>