Grow Layout automatically resizes a div element vertically to push the footer to the bottom of a screen. This component should be used to ensure the footer sits in the appropriate location when the volume of content is not enough to fill a page. Multiple elements can be added above or below the resizing content div as required. Grow Layout is used by the Header Footer Layout component and also by the Small Header Footer Layout component.
npm install @nib-components/grow-layout
import GrowLayout from '@nib-components/grow-layout';
Grow Layout consists of two components, the
Wrapper and the
To use, wrap your page with
<GrowLayout.Wrapper>. It is important that this is a direct parent of the
<GrowLayout.Content> and any sibling elements (header and footer elements for example) you may have.
The wrapping component that expands to fill the screen.
Unfortunately due to this flexbox issue in IE, we need two wrapping elements for this to work.
<GrowLayout.Wrapper> contains both an OuterWrapper and InnerWrapper component.
GrowLayout.InnerWrapper grows to take up a minimum height equal to the height of the screen (
<GrowLayout.Content> expands to take up the remaining space on the screen, less the height of any other sibling elements.
There are no props for this component.
|boolean||Whether the |