css页眉标签,CSS – 带页眉和页脚的100％高度

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

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

HEADER

MAIN

FOOTER

有了这个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不是我的事情.

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

谢谢