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>