这是我几天前以相同的基本标题发布的问题的一个分支。
回顾一下我正在尝试做的事情：
我想要一个分为三个部分的 HTML 页面。一（TOP）占据窗口的左上部分。另一个（底部）占据左下部分。一 (RIGHT) 占据右侧部分。
TOP 和 BOTTOM 具有相同的固定宽度。RIGHT 填充窗口的剩余宽度。
BOTTOM 垂直扩展以适应其内容。TOP 填充窗口的剩余高度并具有最小高度。RIGHT 填充窗口的高度。
如果内容溢出，TOP 和 RIGHT 会垂直滚动。BOTTOM 隐藏其溢出。
尽管我仍然不太了解 CSS 属性，但我编写的代码几乎完全符合我的要求，就行为或部件而言。唯一的问题是 TOP 似乎填充了窗口的高度——而不是 BOTTOM 未占用的部分。因此，当我缩短窗口时，TOP 不会开始滚动，直到窗口变得比 TOP 的文本短，即使 BOTTOM 在此之前隐藏了文本的结尾。
<div id='left' style='position:fixed; left:0; top:0; bottom:0; width:250px; height:100%;'>
<div id='top' style="background:#ffe0e0; float:top; width:100%; height:100%; min-height:128px; overflow-y:auto">
text top . . .
</div>
<div id='bottom' style="background:#f0fff0; position:absolute; left:0; bottom:0; width:100%; height:auto; overflow-y:hidden">
text bottom . . .
</div>
</div>
<div id='right' style="background:#e0e0ff; position:absolute; left:250px; top:0; bottom:0; height:auto; overflow-y:auto">
text right . . .
</div>
我应该怎么做才能使 TOP 结束在 BOTTOM 的顶部，而不是窗口的底部？