svelte-kit / scss 如何使页脚位于页面底部

Question

我是 svelte-kit 的新手

作为一个学习项目，我想检查如何设置页面样式

我在 CSS(scss) 中使用 __layout. svelte 和 flex 属性来用主要内容填充页面，并使页眉在顶部，页脚在底部。我使用了以下代码：

<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>

但是我把主体拉长了，页脚不在底部。

如下图：

Answer 1

我通过在 src\app.html

的开发中添加 id ="svelte" 解决了这个问题

这将使 #svelte 找到 id 并使组件显示属性 flex

src\app.html 应该是：-

<!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>

svelte-kit / scss 如何使页脚位于页面底部

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

css

sass

svelte

sveltekit

svelte-preprocess