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; 
}