How can I achieve the following layout? Without JavaScript. Styling only in 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
When I give the table a position: absolute
and bottom: 0
then top edge cannot stick to bottom edge ot above element. I've already tried:
- setting
body
todisplay: grid; grid-template-rows: auto 1fr;
- setting
body
todisplay: table; height: 100%;
andbody > *
todisplay: table-row
- setting
body
todisplay: flex; flex-direction: column;
and some additional properties tobody > table
- many many more...