页脚覆盖文档css中的剩余可用空间

Question

以下是我的代码，其中我希望将页脚背景色（＃f0b7a4）应用于文档中的其余可用空间（空白）。让我知道flexbox是否具有提供页脚的属性，以便在页眉和内容节占据第三位之后占用文档中的所有可用空间。

* { margin: 0; padding: 0; }

#root { display: flex; flex-direction: column; }

header { background: #305f72; font-size: 32px; padding: 10px; text-align: center;}

.content { background: #f1d1b5; padding: 20px;}

footer { background: #f0b7a4; padding: 20px;}

footer ul { list-style-type: none;}

<div id="root">
  <header>
    <h3>This is a header</h3>
  </header>
  <section class="content">
    <p>This is a content area</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nostrum aspernatur dolores hic adipisci distinctio quas amet nobis facilis blanditiis? Deserunt ab recusandae voluptate nisi commodi. Ab ea est numquam!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nostrum aspernatur dolores hic adipisci distinctio quas amet nobis facilis blanditiis? Deserunt ab recusandae voluptate nisi commodi. Ab ea est numquam!</p>
  </section>
  <footer>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>News</li>
      <li>Contact</li>
    </ul>
  </footer>
</div>

显示白色间距的Codepen示例-https://codepen.io/anon/pen/XQYJxa?editors=1100