как я могу расширить нижний колонтитул до нижней части страницы?

у меня такой макет

<section id="container">
    <header></header>
    <section id="main"></section>
    <footer></footer>
</section>

На данный момент моя страница выглядит так:

-------------------
|                 | 100px height
|  HEADER         |
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|-----------------|
|                 |
|                 |
-------------------

Я хотел бы, чтобы нижний колонтитул расширялся после область основного содержимого в нижнюю часть страницы, как этого добиться?

-------------------
|                 | 100px height
|  HEADER         | 
|-----------------|
|                 |
|  MAIN           | 500px height
|                 |
|-----------------|
|                 |
|  FOOTER         |
|                 |
|                 |
|  FOOTER         |
-------------------

ПРИМЕЧАНИЕ. Я заметил, что все ответы до сих пор закрепляли нижний колонтитул в нижней части страницы, однако при перетаскивании нижний колонтитул просто перемещается вниз / основной контейнер расширяется, я хочу, чтобы нижний колонтитул расширялся.