Css 相对于上方元素和绝对视口底部的位置

如何实现以下布局？没有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

+--------------------------------------------------------+
|这是|
|高度可变，不可滚动区域|
|                                                        |
|高度取决于内容量|顶部边缘
|并取决于浏览器窗口的宽度桌边
+----------+----------+----------+----------+----------+-+副本：