How to create a footer below the main content?

Question

I'm using carbon components for Svelte and would like to know how I can add a footer to the bottom of the page

<Header>
    <!-- navbar content -->
</Header>

<Content>
    <slot /> <!-- renders router view -->
</Content>

<!-- Footer should go here ( at the bottom ) -->

I wasn't able to find a "footer" component. Another solution would be expanding the main content to the bottom of the page even if there is very little content, but how?

Answer 1

You will have to add a container or override the styles for content to take more vertical height.

Personally, I put the footer inside the content so it is pushed aside if there is a side navigation (analogous to the Carbon design system website).

Example:

<Content class="content flex column items-stretch">
    <div class="flex-grow">
        <Grid>
            <Row>
                <Column>
                    <p>Content</p>
                </Column>
            </Row>
        </Grid>
    </div>

    <footer class="flex-constant">
        <p>Footer</p>
    </footer>
</Content>

<style>
    :global(.flex) { display: flex; }
    :global(.flex.column) { flex-direction: column; }
    :global(.flex.items-stretch) { align-items: stretch; }
    :global(.flex-grow) { 
        flex-grow: 1;
        flex-shrink: 0;
    }
    :global(.flex-constant) { 
        flex-grow: 0;
        flex-shrink: 0;
    }
    :global(.content) {
        padding: 0;
        min-height: calc(100vh - 3rem); /* 3rem = header */
    }
</style>

REPL

(I usually use utility classes for flex layout which are in a global stylesheet, so here I added them via :global. Classes on the Carbon components have to be :global or at least use something like .local-element :global(.class-on-component) to scope it again.)

This setup makes the Content take at least space equivalent to the height of the viewport with the ability to grow beyond (the footer is not fixed). Using a vertical flex box, the router content takes all free space, pushing the footer to the bottom if the page is not filled.

Note that using vh can cause various headaches with mobile browsers and their use of the address bar. There should be questions on SO that explain that in more detail. Also, new viewport units (sv*/lv*/dv*) have been added to deal with this issue, but implementation may still be lacking (see this HTTP 203 video for an in-depth explanation).

The REPL will cause additional overflow due to the console panel at the bottom.

Answer 2

Looking at the carbon design systems website, looks like the Design System does not use a footer. A footer-like element exists in this website, but it's contained in the right panel (and the left panel persists, even when the footer scrolls in), like just another section in a hero page.

As you can see, they only have UI Shells for headers, left panels and right panels.

If you plan on religiously following the design system, I do not recommend setting up a footer unlike the one they use on their website. If you still do want to, however, I hope H. B.'s answer will suffice.