0

Css 100% を達成するのに苦労しているので、私の Web サイトはすべての 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 に答える