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

我试图设计一个带有页眉的页面，一个延伸到100%垂直方向（减去页眉和页脚）的主div和一个页脚。如图所示：

我可以让头球和主球发挥作用。像这样：

    <div id="wrapper">

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

    </div>

因此，主div从顶部开始40px来表示页眉，然后从底部停止40px来表示页脚。这很好，但是我不能让页脚div显示在主div下面。现在使用

position:relative

的方式是将页脚放在主div上面。如果使用

position:absolute

则将页脚放在主div下面

我确信我只是做错了，因为CSS不是我的事

这方面的任何帮助都会很好

---

感谢您使用CSS3Flexbox

：

/*QuickReset*/*{margin:0；框大小：border-box；}
body{/*body-或任何父包装器*/
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
主要{
弹性：1；
}

标题
主要
页脚

这里有一个简单的方法。试试这个JSFIDLE：

HTML:

使用css calc（）函数。 使用此方法，您不必定义元素的位置

这是一个 html:

---

有什么理由让你对main_div有绝对的位置吗？这将是导致页脚定位错误的原因。如果改为“位置：相对”，则页脚应显示在下方。-编辑——哦，我明白了。没关系。这在固定页眉和页脚高度的情况下非常有效。是否可以使用动态页脚和页眉？您的#内容不会延伸到100%的垂直景观。我为它添加了红色背景@RokoC Buljan噢，对不起。我没有注意到.PS（在IE8中不起作用）。虽然立场在这里不是一个极端的问题。要使页脚高度与内容大小相对应是相当困难的（如果不是使用JS的话）。另一个缺点是您必须考虑

calc

中的页眉和页脚高度：（您的示例现在不起作用。页脚显示在顶部，页眉显示在

#main

下。

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 id="top"></div>
<div id="main">
    <div id="inner"></div>
</div>
<div id="bottom"></div>

#main {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 50px 0px
}
#inner {
    width: 100%;
    height: 100%;
    background: #f0f;
}

#top, #bottom {
    width: 100%;
    height: 50px;
    background: #333;
    position: absolute;
    top: 0px;
    left: 0px;
}

#bottom {
    bottom: 0px;
}

<header>Header</header>
<main>Main</main>
<footer>Footer</footer>

html, body { 
    height: 100%
}

body {
    color: #FFF;
    padding: 0;
    margin: 0;
}

header { 
    background-color: #000;
    height: 100px;    
}

main { 
    background-color: #AAA;
    height: calc(100% - 150px);    
}

footer { 
    background-color: #000;
    height: 50px;    
}