1

所以基本上我想把页脚贴在我的页面底部

但是我的页面内容是动态的，所以有的时候内容很长，有的时候很短

我已经通过谷歌搜索并找到了很多结果，但是当我尝试时，它们在内容很短时会起作用，但如果内容很长，它会粘在窗口底部（不是页面）并与内容重叠

是否使用javascript无关紧要，但如果你有纯CSS的会更好

4

3 回答 3

2 
#footer{
    position:fixed; 
    bottom:0;
    height:200px;
}

body
{
    min-height:100%;
    padding-bottom:200px; /* same as footer height */
}
于 2013-01-06T05:09:59.443 回答
1

这不使用固定位置，因此它不会总是显示在视口的底部。

从这里开始的 CSS

您还可以在此处查看有关此问题的讨论

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
于 2013-01-06T05:17:04.833 回答
0

我可以找到一个 CSS 解决方案（不是 100%）

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

在下面的这个链接 固定的css页脚

您还可以查看其他 SO 帖子

页脚位置底部和中心

如何使页脚固定在页面中

于 2013-01-06T05:11:18.527 回答