Question

我很难实现100％Css，因此我的网站可以在每个网络浏览器中正确显示。我按照我发现HERE的教程，但没有运气让它运转起来。我有一个包含页脚的示例。这个页脚也不到位。此外，我试图让周围的黑框覆盖我的页脚。有什么我做错了吗？

有关详细信息，请查看我的 LIVE EXAMPLE

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

CSS 100％高度，页眉和页脚

2 个答案: