CSS – 带页眉和页脚的100％高度

我试图设计一个页面,一个标题,一个主要的div可以延伸到垂直景观的100％(减去页眉和页脚)和页脚.喜欢这张照片：

我可以让头和主div工作.喜欢这个：

<div id="wrapper">

        <div class="header_div">HEADER</div>
        <div class="main_div">MAIN</div>
        <div class="footer_div">FOOTER</div>

    </div>

有了这个CSS：

html {
    height: 100%;
 }

 body {
    margin: 0;
    padding: 0;
    height: 100%;
 }

.header_div{

    height: 40px;
    width: 100%;
    BACkground-color: #000000;

}

.main_div{

    margin-bottom:40px;
    margin-top:40px;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    BACkground-color: red;
}


.footer_div{

    position: relative;
    height: 40px;
    width: 100%;
    BACkground-color: blue;
}

所以主要的div从顶部开始40px,以便标题,然后从底部停止40px的页脚.这样做很好,但是我不能让脚下的div显示在主div下方.现在的位置是：相对它将页脚放在主div上.如果我使用position：absolute将它放在主div下面.

我相信我只是做错了,因为CSS不是我的事情.

对此的任何帮助将是巨大的.

谢谢

*{ margin:0; box-sizing: border-box; }/* Quick reset */

body { /* or any parent wrapper */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>