html - CSS:3 个 div，一个固定大小，其他带有可滚动表格的动态

Question

我并排放置了 3 个 div。最左边的 div 有固定大小:60px；其他两个 div 应该填满屏幕的其余部分。复杂的部分是中间和右边的 div 应该包含可滚动的表格。截至目前，我必须滚动页面才能到达表格底部。这是当前外观的图片:

如您所见，我在左侧的 div(黄色边框)上有一个菜单。两个红色边框的 div 是表格。

问题 1:包含歌曲的最右边的表格没有填满屏幕的其余部分。

问题 2:我无法让表格(播放列表和歌曲表格)滚动。换句话说，我希望它们在页面底部“结束”，并在表体或类似的东西中有一个滚动条。

这是代码:

.div_container
{
    top: 0;
    bottom: 0;
    border: 1px solid #0000FF; /* blue */
    margin-top: 87px;
}
.div_menu
{
    width: 60px;
    background: #111111;
    position: fixed;
    float: left;
    border: 1px solid #F7FE2E; /* yellow */
}

.div_playlists
{
    width: 25%;
    height: 100%;
    top: 0;
    bottom: 0;
    margin-left: 60px;
    float: left;
    border: 1px solid #DF0101; /* red */
}

.div_tracks
{
    max-width: 60%;
    height: 100%;
    float: left;
    margin-left: 10px;
    border: 1px solid #DF0101; /* red */
}

对于表格:

table.playlists
{
    width: 100%;
    height: 100%;
    text-align: center;
    float: left;
    background: #181818;
    border-collapse: collapse;
}
    table.playlists tbody
    {
        font-size: small;
        overflow: auto;
        width: 100%;
        height: 100%;
    }

table.tracks
{
    width: 100%;
    height: 100%;
    text-align: center;
    float: left;
    background: #181818;
    border-collapse: collapse;
}
    table.tracks tbody
    {
        font-size: small;
        overflow: auto;
        width: 100%;
        height: 100%;
    }

HTML:

<div class="div_container">
    <div class="div_menu"></div>
    <div class="div_playlists"></div>
    <div class="div_tracks"></div>
</div>

很抱歉这个菜鸟问题，我可能应该使用 Bootstrap 模板或其他东西，但我找不到任何符合我的设计兴趣的免费模板。

Answer 1

这只是使用 position:fixed 的一个简单例子，如 this Fiddle example :

CSS 是唯一有趣的部分:

div {
    color:white;
    position:fixed;
    overflow:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;    
}
#top {
    background:red;
    height:64px;
    bottom:auto;
}
#sidebar {
    background:green;
    width:64px;
    top:64px;
    right:auto;
}
#playlists {
    background:navy;
    left:64px;
    top:64px;
    width:192px;
    right:auto;
}
#tracks {
    background:brown;
    left:256px;
    top:64px;    
}