100%宽度的CSS粘性页脚

我正在尝试实现一个100%宽度的粘性页脚。它应该粘贴在页面底部，但不能与页面内容div重叠。 我使用的页面布局与此示例相同：

如您所见，页脚与div#container的宽度相同。 但我想将页脚拉伸到100%宽度，同时页面内容保持居中，并在调整浏览器大小时保持高度拉伸。 我该怎么做？

试试这个 单击链接以查看新结果

---

如果要将页脚拉伸到容器之外，则需要将页脚伸出容器，或延伸到主体的宽度。至于重叠，请在页脚上使用较低的z索引，并让其他具有较高z索引的内容重叠

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