css-粘性页尾

256 阅读1分钟

粘性页尾

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。

  <style type="text/css">
  .Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  .Site-content {
    flex: 1;
  }
  </style>
</head>
<body>
  <body class="Site">
    <header>…</header>
    <main class="Site-content">…</main>
    <footer>…</footer>
  </body>
</body>