我正在创建HTML布局：3个水平层。从顶部开始的第1和2层，它们应具有恒定的高度（例如100像素），并且这2层应始终可见。
第三层应占据屏幕的其余部分的高度。但是，如果内容占用了layer1＆2下剩余的更多空间，则第3版面应具有滚动条以向下和向上滚动。
我创建了一个代码，但scroler用于整个页面。如何仅在最后一个底部最宽的图层（div）中创建滚动条？
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应该不占用视口。并且div 1和div 2（从顶部开始）应该始终可见。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句