需要帮助修复顶部栏内的另一个div与滚动

Question

大家好！我正在尝试创建一个模板，如下图所示。

我会解释你的作用：

左右菜单将在150到50像素之间切换（我已经使用jQuery创建了这部分脚本）。当切换脚本从150运行到50时，页面内容将会扩展（已经完成）。

侧面菜单在图片中写有“固定位置”，但我不再需要它了，因为我会使用overflow-y：滚动内容而不是页面滚动。

我不知道该怎么做：我真的无法修复那个顶部栏并在内容扩展的同时进行扩展。

图像

到目前为止，这就是我所做的：

Fiddle

CSS：

    *{
    margin: 0px;
    padding: 0px;
}
body, html{
    height: 100%;
}

#container {
    display: table;
    width: 100%;
    height: 100%;
}

#left, #middle, #right {
    display: table-cell;
    height: 100px;
}

#left, #right {
    width: 150px;
    background: #1f1f1f;
    height: 100%;
    color: white;
}

#middle {
    background: white;
}

Answer 1

我给了Top Content div宽度'100％＆＃39;这样它的父宽度

像这样修改你的代码。请看小提琴。

WORKING CODE

Answer 2

你可以使用固定位置为顶栏：

Html

<div id="top">top bar</div>

<强>的CSS

#top {position:fixed; background:lightblue; top:0; left:150px; right:150px; }

<强>的jQuery

var top = $('#top');
$('#middle').css('padding-top', top.outerHeight());

$('#left').click(function(){
   width = $(this).width();
    if(width == 150){
        $(this).css('width', 50);
        top.css('left', 50);
    } else {
        $(this).css('width', 150);
        top.css('left', 150);
    }
});

$('#right').click(function(){
   width = $(this).width();
    if(width == 150){
        $(this).css('width', 50);
        top.css('right', 50);
    } else {
        $(this).css('width', 150);
        top.css('right', 150);
    }
});

Example