CSS - 带页眉和页脚的 100% 高度

Question

我正在尝试设计一个带有页眉的页面、一个延伸到 100% 垂直横向(减去页眉和页脚)的主 div 和一个页脚。喜欢这张照片:

我可以让页眉和主 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 下方。现在使用 position: relative 的方式是将页脚放在主 div 的顶部。如果我使用 position:absolute 它会将它放在主 div 的下面。

我确定我只是做错了，因为 CSS 不是我的菜。

在这方面的任何帮助都会很棒。

谢谢

Answer 1

使用 CSS3 Flexbox:

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


body {                /* 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>