Question

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

但我的网页内容是动态的，所以在某些情况下内容很长，在某些情况下很短

我通过谷歌搜索并发现了很多结果，但是当我尝试它时，它们在内容很短时工作，但如果内容很长，它会粘在窗口的底部（而不是页面）并重叠含量

如果它使用javascript并不重要，但如果你有纯CSS的那么它会更好

Answer 1

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

body
{
    min-height:100%;
    padding-bottom:200px; /* same as footer height */
}

Answer 2

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

来自here

的CSS

您还可以查看有关此here

的讨论

* {
    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/

*/

Answer 3

我可以找到一个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');
}

在此链接下方 Fixed css footer

您还可以查看其他SO帖子

Footer position bottom and center

how to make footer fixed in a page

如何将页脚粘到底部？有点扭曲

3 个答案: