如何使用CSS实现页面内容占满屏幕且页脚固定在页面底部

想要实现两个效果：页脚始终固定在页面底部，同时页面内容可以占满100%屏幕高度。

初始代码存在的问题 #

最初编写的代码如下：

<html>
    <head>
    <title>弗雷德二手车（轿车、卡车、吉普车）</title>
    <style>
        #container{
           height: auto;
           width: 100%;
        }
    </style>
</head>
<body style="margin: 0px;">
    <div id="container">
        <header style="background-color:black;
                color: white;
                text-align:center">
            弗雷德二手车（轿车、卡车、吉普车）
        </header>

        <h1>欢迎光临弗雷德二手车网站！</h1>

        感谢您访问我们的站点！

        <footer style="background-color:black;
                color: white;
                text-align:center">
           美国卡特镇
           弗雷德大街121号
        </footer>
    </div>
</body>
</html>

此时页面效果不符合预期，页脚没有停在页面底部，而是跟在内容后面，内容较少时就会停在页面中间：

之前误以为给container元素设置样式就能让容器占满全屏，实际上height: auto只会跟随内容高度计算，没有给父元素设置高度基准的情况下，无法实现占满全屏的效果。

简单实现方案 #

使用flex布局就能非常便捷地实现需求，不会出现绝对定位导致的内容被页脚遮挡的问题：

1. 给body设置min-height: 100vh，保证页面最小高度等于整个视口的高度
2. 将body设置为flex容器，主轴方向改为纵向
3. 在内容和页脚之间新增一个空白占位元素，设置flex: 1，该元素会自动撑满头部、内容和页脚之外的所有剩余空间，自然将页脚挤到页面最底部

修复后的完整代码 #

<html>
<head>
<title>弗雷德二手车（轿车、卡车、吉普车）</title>
<style>
   body{
      margin: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
   }

   header{
      height: 5vh;
      padding-top: 5px;
      background-color:black;
      color: white;
      text-align:center;
      font-size: 16pt;
      font-weight: bold;
      font-family: arial;
   }

   .spacer {
       flex: 1;
   }
</style>
</head>
<body>

<header>
    弗雷德二手车（轿车、卡车、吉普车）
</header>

<h1>欢迎光临弗雷德二手车网站！</h1>

感谢您访问我们的站点！

<div class="spacer"></div>
<footer style="background-color:black;
            color: white;
            text-align:center">
联系电话：(555)555-5555<br />
弗雷德大街121号<br />
美国卡特镇
</footer>

</body>
</html>

修复后的效果符合预期，内容较少时页脚固定在视口底部，内容超出视口高度时，页脚会跟随内容移动到整个页面的最底部：

内容的提问来源于stack exchange，提问作者Sam