页脚紧贴页面底部的方法

页面包含页脚时，当页面内容足够长时页脚会处于页面底部显示，而当页面内容较短时（比如错误信息页面）就会出现问题 。此时页脚不能像我们期望中那样“紧贴”在页面的最底部，而是紧跟在内容的下方。下面列出两种解决方法：

1. 通过calc()计算并设置内容最小高度：

把header和main内容用div包裹，然后设置其高度为视口高度减去页脚高度，假设页脚高度固定为100px。

<div class="wrapper">
  <header>
    <h1>title</h1>
  </header>
  <main>
    <p>some text...</p>
  </main>
</div>
<footer>
  <p>© 2023 No rights reserved.</p>
  <p>Made with ♥ by ...</p>
</footer>

.wrapper {
  min-height: calc(100vh - 100px);
}

2. Flexbox方法：

几乎万能的flex方法。✔️

<header>
  <h1>title</h1>
</header>
<main>
  <p>some text...</p>
</main>
<footer>
  <p>© 2023 No rights reserved.</p>
  <p>Made with ♥ by ...</p>
</footer>

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