CODEWITHSUNDEEP
csssasssveltesveltekitsvelte-preprocess
MSH
MSH

Reputation: 425

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

Upvotes: 2

Views: 3396

Answers (2)

D4LI3N
D4LI3N

Reputation: 394

Solution for SvelteKit's initial project

1. Append this to your app.pcss

html {
  display: flex;              /* Make  <html> of type flex */
  min-height: 100%;           /* Force <html> to fill the whole page */ 
} body {
  flex-grow: 1;               /* Force <body> to fill the whole page */
  display: flex;              /* Make  <body> of type flex */
} #svelte-init {
  flex-grow: 1;               /* Force <div>  to fill the whole page */
  display: flex;              /* Make  <div>  of type flex */
  flex-direction: column;     /* Force <div>  to be vertical */
}

2. Edit your app.html

Remove style tag, and add id="svelte-init" to the main <div>

<div id="svelte-init">%sveltekit.body%</div>

Tip: These two steps will ensure that all the root elements are filling the whole page.

3. Usage

Now, to automatically stretch any component; simply add flex-grow: 1; to the component's style, or just grow if you are using Tailwind CSS.

<div class='grow'>  <h1>Content<h1/>  <div/>

enter image description here

Tip: In this example, the grow is applied to the central component <div>, so that the footer will always stay at the bottom, no matter the resolution or content dimensions inside the central <div>.

Upvotes: 1

MSH
MSH

Reputation: 425

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>

Upvotes: 1

Related Questions