css - 页脚没有粘在底部，尽管我已经对它进行了编码

Question

我暂时删除了页脚，网站必须上线。所以链接也不见了。

如您所见(在 FF2 和 IE7 中)页脚位于屏幕底部，但不在页面(内容)底部。

我的代码中有这个:

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

在 css 中:

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

或者，长话短说:我按照给出的说明进行操作 here .

Answer 1

您没有足够仔细地按照您的说明进行操作。 Matthew's layout的关键

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

是容器有position:relative而页脚有position:absolute。这将一个放在另一个里面。请注意，通过保留 padding-bottom 页脚的大小，容器为页脚保留了一个空间。因此，布局仅在页脚高度固定时有效。

绝对定位 botttom:0 元素将把自己放在最近的相对定位父元素的底部。如果不存在，则使用视口(viewport)代替，这就是您的布局中发生的情况。

你的 footer div 不是你的 wrap div 的子元素。