csssasssveltesveltekitsvelte-preprocess

svelte-kit / scss how to make the footer go the the bottom of the page

I'm new in svelte-kit

as a learning project, I want to check how to style the page

I use __layout. svelte with flex property in CSS(scss) to fill the page with the main content and make the header on top and the footer on the bottom. I used the following code:

<header>
    <h1>Header</h1>
</header>
<main>
    <slot />
</main>

<footer>Footer</footer>

<style lang="scss">
    :global {
    
        body {
            margin: 0;
            height: 100%;

            #svelte {
                display: flex;
                flex-direction: column;
                height: 100%;
            }
        }
    }
    header {
        background: #333;
        color: rgb(100, 230, 170);
        padding: 10px;
        font-size: 1.2rem;

    }
  main {
    background-color: blanchedalmond;
    flex: 1;
    padding: 15px;
    overflow-y: auto;
  }

    footer {
        background: #ddd;
        color: #333;
        display: flex;
        padding: 10px;
        font-size: 1.2rem;
        font-weight: bold;
        justify-content: center;
    }
</style>

but I'm getting the main body stretched and the footer is not at the bottom.

as in the below picture:

enter image description here

Solution

  • I solved this by adding id ="svelte" in the dev of the src\app.html

    this will make the #svelte find the id and make the component display property flex

    the src\app.html should be:-

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <link rel="icon" href="%svelte.assets%/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div id ="svelte">%svelte.body%</div>
    </body>
</html>