Page

A general component taking up the entire page. Useful as part of a Holy Grail layout.

Structure

Examples

The following shows an element (typically <body>) marked as a page. The page uses a vertical flex layout, which header and footer marked with lay-fitted so that they don't expand, leaving the <main> element to fill the center of the page. Because the example by definition takes up the full page, you'll need to scroll down to read the rest of the documentation below it. The horizontal positioning anomalies in this example are a product of showing one page in the middle of another. A page by itself under most circumstances appears as expected.

Header

Lorem ipsum

Lorem ipsum dolor sit amet …

Footer
<div class="page layout-flex along-block"> <-- usually <body> -->
  <header class="lay-fitted" style="background-color:lightgray">Header</header>
  <main>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet …</p>
  </main>
  <footer class="lay-fitted" style="background-color:lightgray">Footer</footer>
</div>

Properties

--skelt-page-min-height
The minimum height of the page. Defaults to 100vh, allowing scrolling if there is more content than can fit on one page.