相对于上方元素的位置，相对于视口的绝对位置

Question

如何实现以下布局？没有JavaScript。只能在CSS中进行样式设置。

+--------------------------------------------------------+
|                      This is                           |
|          variable-height, non-scrollable area.         |
|                                                        |
|  The height varies depending on the amount of content  |     Top edge
|    and depending on the width of the browser window.   |     of the table
+----------+----------+----------+----------+----------+-+ <-- fixed to bottom
| column A | column B | column C | column D | column E |^|     of above area
+----------+----------+----------+----------+----------+-+
| cell A1  | cell B1  | cell C1  | cell D1  | cell E1  |S|
+----------+----------+----------+----------+----------+C|
| cell A2  | cell B2  | cell C2  | cell D2  | cell E2  |R|
+----------+----------+----------+----------+----------+O|
| cell A3  | cell B3  | cell C3  | cell D3  | cell E3  |L|
+----------+----------+----------+----------+----------+L| <-- scrollable table
| cell A4  | cell B4  | cell C4  | cell D4  | cell E4  |B|
+----------+----------+----------+----------+----------+A|
| cell A5  | cell B5  | cell C5  | cell D5  | cell E5  |R|
+----------+----------+----------+----------+----------+-+
| cell A6  | cell B6  | cell C6  | cell D6  | cell E6  |v+     Bottom edge
+----------+----------+----------+----------+----------+-+     of the table
========================================================== <-- fixed to bottom
                                                               of the window

当我给表一个position: absolute和bottom: 0时，上边缘将不能粘到元素上方的下边缘。我已经尝试过：

• 将body设置为display: grid; grid-template-rows: auto 1fr;
• 将body设置为display: table; height: 100%;，将body > *设置为display: table-row
• 将body设置为display: flex; flex-direction: column;，并将一些其他属性设置为body > table
• 还有很多...