html - 如何为一个div添加滚动条，2个div始终可见

Question

我正在创建 HTML 布局:3 个水平层。从顶部开始的第 1 层和第 2 层，它们应该具有恒定的高度(例如 100 像素)，并且这两个层应该始终可见。

第三层的高度应该占据屏幕的其余部分。但是，如果内容占用更多 layer1 和 2 下剩余的空间，第三种布局应该有滚动条来向下和向上滚动。

我创建了一个代码，但滚动条适用于整个页面。如何仅在最后一个底部最宽层 (div) 创建滚动条？

Current code

HTML:

<div id="container">
        <div id="layer1">
            Layer 1
        </div>

        <div id="layer2">
            Layer 2 </br>
Layer 2 </br>Layer 2 </br>Layer 2 </br>Layer 2 

        </div>
            <div id="Div3">
                Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>    Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>    Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>
    Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>Layer 3 </br>
            </div>
</div>

CSS:

#layer1 {
    background-color: green;
    height: 20px;
}

#layer2 {
    background-color: red;
    height: 100px;   
}

#layer3 {
    background-color: yellow;
    height: calc(100% - (120px));
    overflow: scroll;
}

更新 1) 也许这从我的描述中不清楚，但底部 div 应该不会超过视口(viewport)。 div 1 和 div 2(从顶部开始)应该始终可见。

Answer 1

查看此 example fiddle

你可以使用；

height: 160px;
overflow: scroll;
overflow-x:hidden;