CSS 100％高度，带页眉和页脚

Question

我在实现Css 100％方面遇到困难，因此我的网站可以在每个Web浏览器中正常显示。 我遵循了我在这里找到的教程，但是没有使它起作用的运气。 我有一个包含页脚的示例。 此页脚也没有放置。 另外，我试图使周围的黑框覆盖我的页脚。 我做错什么了吗？

有关更多详细信息，请查看我的直播示例

的CSS

<style>
html,body {
    padding: 0px;
    margin: 0px;
    background: #333333;
    background-size: 100%;
    line-height: 130%;
    height: 100%
    font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;   
    font-size: 90%;
    color: #5e5e5e;

}

/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/

#colorblock {
    position: absolute;
    top: 60px;
    left: 0px;
    background: #c69a55;
    z-index: -1;
    height: 65px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}


/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/

#container {

    z-index: 1;
    width: 850px;
    position: relative;
    margin: 0 auto;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */

    }

#contentArea{

       padding:1em 1em 5em;
       min-height:700px;
       width: 850px;
       position:relative;
       background: #f2f2f2;
       border-right: 15px solid #000000;
       border-left: 15px solid #000000; 
       position: relative;

}    

/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/

#header {
    width: 100%;
    height: 180px;
}



/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/

#clear {
    clear: both;
    margin-bottom: 10px;
}

#addSpace{
    padding-bottom:7px; 
}


.bottomNav {
    margin-right:auto;
    margin-left:auto;
    width:880px;
    height: 200px;
    background: #7a7a7a;


}

#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;}

</style>

Answer 1

将页脚设置到位，您只需要重置width: 905px; 在.bottomNav类中

Answer 2

在CSS中使用（width：calc）属性

例如。 您需要页眉100px和页脚100px，内容高度为100％

的CSS

body, html{height:100%; margin:0px;}
.header{height:100px;}
.footer{height:100px;}
.content{height: 100%;
    height: -webkit-calc(100% - 200px);
    height: -moz-calc(100% - 200px);
    height: calc(100% - 200px);
}

我们将-200 bcoz标头高度设置为100px +页脚高度设置为100px，因此100 + 100 = 200