文章
    https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
    https://www.w3cplus.com/css3/css-secrets/sticky-footers.html

    场景：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚会被内容向下推送。

    最佳实现方案

    1. <body class="Site">
    2.   <header>…</header>
    3.   <main class="Site-content">…</main>
    4.   <footer>…</footer>
    5. </body>
    8. .Site {
    9.   display: flex;
    10.   min-height: 100vh;
    11.   flex-direction: column;
    12. }
    14. .Site-content {
    15.   flex: 1;
    16. }

    参考文档

    1. <style>
    2.     * {
    3.         margin: 0;
    4.         padding: 0;
    5.     }
    6.     html,
    7.     body {
    8.         height: 100%;
    9.     }
    10.     .wrapper {
    11.         height: 100%;
    12.         display: flex;
    13.         flex-direction: column;
    14.     }
    15.     .content {
    16.         flex: 1;
    17.         border: 1px solid black;
    18.     }
    19.     .footer {
    20.         height: 50px;
    21.     }
    22. </style>
    24. <div class="wrapper">
    25.     <div class="content">这是内容</div>
    26.     <div class="footer">这是底部</div>
    27. </div>