Sticky Footer

Sticky Footer

Links

本文致力于解决网页内容不满一屏时,Footer 无法驻留屏幕底部的问题。

下方示例代码来源:CSS秘密花园: Sticky footers

最简 HTML 代码结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <header></header>
    <main>
      <h1>
        This is a static template, there is no bundler or bundling involved!
      </h1>
    </main>
    <footer>
      <div>®2019</div>
    </footer>
  </body>
</html>

最简 CSS 代码

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注