Grow Layout
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.
Installation
npm install @nib-components/grow-layout
Usage
import GrowLayout from '@nib-components/grow-layout';
Grow Layout consists of two components, the Wrapper and the Content.
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.
GrowLayout.Wrapper
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 (100vh).
GrowLayout.Content
<GrowLayout.Content> expands to take up the remaining space on the screen, less the height of any other sibling elements.
Interactive demo
Props
GrowLayout.Wrapper
There are no props for this component.
GrowLayout.Content
| Prop | Type | Default | Description |
|---|---|---|---|
flex | boolean | false | Whether the GrowLayout.Content should should be display: flex;. |