css3 设置粘性页尾

2019-12-07 13:39 / 已浏览 314 次

使页脚停留在内容稀疏的页面底部

HTML

<body class="Site">
  <header>header</header>
  <main class="Site-content">body</main>
  <footer>footer</footer>
</body>

css

body {
        margin: 0;
    }
    .Site {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        text-align: center;
    }
    .Site-content {
        flex: 1;
    }
    footer, header {
        background: red;
        text-align: center;
        padding: 10px 0;
    }
    header {
        background: #000;
        color: #fff;
    }

Img

群号:339840649
Node、Vue、react、angular