3. 让footer黏在页面最下方的最佳方案

让footer黏在页面最下方的最佳方案

  • 梵
    administrators

    这个问题困扰我很久，每次我都要Google找答案，虽然每次都可以搞定，但是回头又忘记当时是怎么做的了。几天又上网搜了搜，就得这个一定是最佳方案了！记下，记下！

    HTML

    <!doctype html>
<html lang="en">

<head>
  <!-- head content -->
</head>

<body>
  <header>
    <!-- header content -->
    <h1>Hello header!</h1>
  </header>
  <main>
    <!-- page content -->
    <p>Hello main content!</p>
  </main>
  <footer>
    <!-- footer content -->
    <p>
      I like sitting at the bottom :-)</p>
  </footer>
</body>

    CSS

    body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 /** this is super important **/
}
footer {
  margin: auto auto 0 auto;
}

    演示

    https://codepen.io/adamcai/pen/YBXKMQ?editors=1100

    0
css 1