2

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 to display: grid; grid-template-rows: auto 1fr;
  • setting body to display: table; height: 100%; and body > * to display: table-row
  • setting body to display: flex; flex-direction: column; and some additional properties to body > table
  • many many more...
  • duplicate of : https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – Temani Afif Aug 17 '18 at 23:13

0 Answers0