0

我在实现 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>
4

2 回答 2

0

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

于 2012-06-27T06:52:36.800 回答
0

在 CSS 中使用（宽度：计算）属性

例如。你需要页眉 100 像素和页脚 100 像素，内容高度为 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

于 2014-04-09T12:25:22.217 回答