2.6. Site

Use the following markup to turn the site into fluid flexbox layout with sticky footer. Credits for cross-browser solution go to Philip Walton.

Example

Main Content
Sticky Footer
<body class="site">
    <header role="banner" class="site-header">
        <div class="kss__example-box">Header</div>
    </header>
    <main role="main" class="site-content">
        <div class="kss__example-box">Main Content</div>
    </main>
    <footer role="contentinfo" class="site-footer">
        <div class="kss__example-box">Sticky Footer</div>
    </footer>
</body>