/

<Min100Layout> Component

The <Min100Layout /> component is used to render page layouts that include footers, and are intended to have a minimum height of 100vh, such that the footer always appears at the bottom of the viewport.

Share
Code Editor


<Min100Layout footer={<p style={{ margin: 0, border: '1px solid blue'}}>This is the footer.</p>}>

  <p>This is the content area.</p>

  <p>Put everything that will be visible on the page in this area.</p>

  <p>This includes Navigation, AlertBanners, etc etc.</p>

</Min100Layout>

Where it's used

Latest:2.0.1
Search with

Releases

Latest:2.0.1
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...

Props

NameDescription
children*
function
Render prop for the page area. All visible elements on the page, except for the footer, should be rendered as children of Min100Layout.
className
function
Optional className to pass to the root element. The root element always has a height of 100vh or greater. Styling such as page background coloration likely belongs on the root element.
footer*
function
Render prop for the footer area. This area will be displayed at the bottom of the page, regardless of the height of the page area.