CSS粘性頁腳，寬度爲100％

Question

我試圖實現粘性頁腳，寬度爲100％。它應該堅持在頁面的底部，但不能與頁面內容div重疊。 我正在使用與此示例相同的頁面佈局： http://peterned.home.xs4all.nl/examples/csslayout1.html

正如您所看到的，頁腳具有與div＃容器相同的寬度。 但是我想將頁腳拉伸至100％的寬度，而頁面內容保持居中並在調整瀏覽器大小時保持高度。 我該怎麼做？

Answer 1

試試這個

點擊文件鏈接，查看新的結果 http://jsfiddle.net/n6u3e/

/** 
* 100% height layout with header and footer 
* ---------------------------------------------- 
* Feel free to copy/use/change/improve 
*/ 

html,body { 
    margin:0; 
    padding:0; 
    height:100%; /* needed for container min-height */ 
    background:gray; 

    font-family:arial,sans-serif; 
    font-size:small; 
    color:#666; 
} 

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0; 
} 

h2 { 
    font:1.25em georgia,serif; 
    margin:0 0 0.5em; 
} 
    h1, h2, a { 
     color:orange; 
    } 

p { 
    line-height:1.5; 
    margin:0 0 1em; 
} 

div#container { 
    position:relative; /* needed for footer positioning*/ 
    margin:0 auto; /* center, not in IE5 */ 
    width:750px; 
    background:#f0f0f0; 

    height:auto !important; /* real browsers */ 
    height:100%; /* IE6: treaded as min-height*/ 

    min-height:100%; /* real browsers */ 
} 

div#header { 
    padding:1em; 
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat; 
    border-bottom:6px double gray; 
} 
    div#header p { 
     font-style:italic; 
     font-size:1.1em; 
     margin:0; 
    } 

div#content { 
    padding:1em 1em 5em; /* bottom padding for footer */ 
} 
    div#content p { 
     text-align:justify; 
     padding:0 1em; 
    } 

div#footer { 
    background:#ddd; 
    border-top:6px double gray; 
} 
    div#footer p { 
     padding:1em; 
     margin:0; 
    } 
#barco{ 
width:750px; 
    margin:auto; 
}