css粘性页脚，固定一个页脚

css粘性页脚，固定一个页脚

方案一：

<div class="wrapper">
    <header class="page-header">This is the header</header>
    <article class="page-body">
        <p>Main page content here, add more if you want to see the footer push down.</p>
    </article>
    <footer class="page-footer">Sticky footer</footer>
</div>

.wrapper {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

方案二：

<div class="wrapper">
    <header class="page-header">This is the header</header>
    <main class="page-body">
        <p>Main page content here, add more if you want to see the footer push down.</p>
    </main>
    <footer class="page-footer">Sticky footer</footer>
</div>

html, body {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.page-header, .page-footer {
    flex-grow: 0;
    flex-shrink: 0;
}
.page-body {
    flex-grow: 1;
}