Question

我使用以下基本的html和css模式（虽然我的实时代码看起来非常不同）

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

将粘性页脚放到页面底部。

我在body标签上应用了两个背景。一个是重复的木质纹理，然后是一个顶部的阴影。这两个都在页脚下。

它几乎可以正常工作，但在长页面（你必须向下滚动以查看页脚）时，当你调整浏览器窗口的大小时，阴影（而不是木头）会爬上页面。我已经尝试将阴影移动到右下角位置，但这根本不起作用。

以下是它的分期：我在FF和Safari中重复了这个问题 http://www.dnbsandbox.com/diablo/

Answer 1

从css的第一行删除它：

html {
  height: 100%;
}

在固定的粘性页脚下应用两个背景

1 个答案: