CSS 具有独立固定、可滚动内容区域的布局

Question

努力在我的 CSS 布局中实现我想要的功能。

基于这个基本结构https://jsfiddle.net/606ep8g7/6/。我正在尝试让以下部分协同工作：

<body>
    <div id="A">
        <div id="A1">
        </div>
        <div id="A2">
        </div>
        <div id="A3">
        </div>
    </div>
    <div id="dragbar"></div>
    <div id="B">
    </div>
</body>

2 个容器：#A 和 #B 用 div 调整它们的大小彼此。
#A 是固定的（没有滚动）并且包含 3 divs：#A1这是一个固定的标志，#A2是一个导航栏，#A3是一个 jstree 列表的容器。

#A1 是固定高度，而 #A2 包裹其必须始终可见的内容。这样就可以了。

我正在尝试让 #A3 在固定的 #A 元素内设置自动滚动条，同时当内容推到 window 之外时，在 #B 上实现滚动条，但我似乎无法让这些工作。

我只是找不到合适的组合来让所有这些正常工作。如果我做#A3position:absolute，我可以得到滚动条，但它不再相对于#A2的动态调整。但是当相对时，#A3 不会扩展到 window 的底部，也不会在内容溢出时自动放置滚动条。我无法修复 DIV 的高度，因为它是动态填充的并且需要使用 #A2 进行调整。有什么想法吗？

Answer 1

display:flex 和 flex:1 + overflow 在 div 上滚动可能是一个解决方案：https://jsfiddle.net/606ep8g7/7/

Answer 2

由于您使用 javascript 动态更改宽度，因此您可以对高度执行相同的操作。

$('#A3').css('height', $('#A').outerHeight() - $('#A1').outerHeight() - $('#A2').outerHeight())

我根据其他两个元素的高度使用 javascript 设置了#A3 的初始高度。类似地，#A3 的高度在 mousemove 上改变。这不是一个纯粹的 CSS 解决方案，但由于您正在使用 JS 操纵宽度，因此没有理由不对高度执行相同的操作。

http://jsfiddle.net/3bdenypq/2/

CSS 具有独立固定、可滚动内容区域的布局

CSS Layout with Separate Fixed, Scrollable Content Regions

css

css-position

scrollable