3

I want the table height to fit the parent’s available height. Ideally, I want:

  • The footer to always be docked at the bottom of the parent container.

  • If the table contains a few rows, the footer should remain docked at the bottom.

  • If the table contains more rows than fit the parent’s height and needs to overflow then the overflow should be visible only for the table body, and the footer should remain docked at the bottom and not be pushed downwards.

  • A flexbox approach if possible (it seems to me that this is a flex scenario)

What I don’t want:

  • A height: 100vh approach

  • A calc (100vh - ***px) involved (because I want to use the methodology in arbitrary component hierarchies inside my solution)

  • Fixed heights in the table

  • To use absolute/fixed positioning

  • No 3rd party solutions (if possible)

  • To use .offsetHeight

Example: https://stackblitz.com/edit/react-8h5dpy

Visual Examples:

https://imgur.com/a/F4Emoy7

Meraj al Maksud
  • 1,528
  • 2
  • 22
  • 36
GeorgeCodeHub
  • 131
  • 1
  • 10

1 Answers1

3

Growing an item to take all available space but not exceeding the height of the parent could work like follows:

.parent {
   // use flexbox layout for children
   display: flex;
   flex-direction: column;
}
.childThatGrows: {
   // take as much space as available
   flex-grow: 1;        

   // don't take more space than available (elements are as high as their content by default)
   min-height: 0;       
   overflow: scroll;
}

Why min-height: 0? See https://stackoverflow.com/a/36247448/3066632.

For your example this might look like this: https://stackblitz.com/edit/react-wgbzpb.

froitag
  • 177
  • 1
  • 1
  • 9
  • 1
    thanks for your answer, it's really helpful, but when I extend it to more complicated layout and it does not work, could you point me a way to solve it? appreciate it! here is the codesandbox: https://codesandbox.io/s/condescending-hooks-5x8g7?file=/src/App.js – yurenju Jun 11 '20 at 09:19