CSS 粘性页脚，宽度为 100%

Posted 2023-03-21

【中文标题】CSS 粘性页脚，宽度为 100%

【英文标题】：CSS Sticky footer with 100% width

【发布时间】：2013-09-28 18:39:08

【问题描述】：

我正在尝试实现一个宽度为 100% 的粘性页脚。它应该贴在页面底部，但不能与页面内容 div 重叠。 我正在使用与此示例相同的页面布局： http://peterned.home.xs4all.nl/examples/csslayout1.html

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

【问题讨论】：

如果你想将页脚拉伸到容器之外，它需要超出容器，或者到正文的宽度。至于重叠，请在页脚上使用较低的 z-index，并让其余内容具有较高的 z-index 以使其重叠

【参考方案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;