页尾的页脚[重复]答案

【问题标题】：Footer at end of page [duplicate]页尾的页脚[重复]
【发布时间】：2014-02-05 17:28:01
【问题描述】：

我正在为我的网站使用 OSclass，并尝试在底部设置页脚，但没有任何效果。你可以看我的网站here

它适用于我的主页，因为我的内容很长，但它不适用于例如项目或帐户（我的页脚停留在内容的末尾，而不是页面的末尾）。

CSS：

body {  
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
list-style-type:none;
}

.header {
height: auto; 
background-color: #0080c4; 
clear: both;
}

.header_wrap {
width:960px; 
margin:0 auto; 
position:relative; 
padding: 10px 0 160px 0;
}

.header .wcont {
float:left; 
width:468px; 
padding:0px; 
color:#FFFFFF;
}

.content {
clear: both;
margin-bottom: 20px;
width: 960px;
margin-left: auto;
margin-right: auto;
}

.footer {
padding-top: 5px;
padding-right: 33px;
padding-left: 33px;
padding-bottom: 0;
background-color: #0080c4;
clear: both;
position: fixed;
bottom: 0px;
width: 100%;
}

.footer_wrap {
width:960px; 
margin:0 auto; 
position:relative; 
padding:0 0 25px 0;
}

.footer .wcont {
float:left; 
width:200px; 
padding:0 15px; 
color:#FFFFFF;
}

有人有解决办法吗？

非常感谢。

【问题讨论】：

标签： html css

【解决方案1】：

试试这个，它将页脚放在内容之后或页面底部，具体取决于页面中有多少内容：

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

如果页面长度发生变化，我不会使用它...

【讨论】：

【解决方案2】：

这里有一个解决方案给你哥们：http://jsfiddle.net/xa7LP/

HTML

<div class="header">Header</div>
<div class="body">Body</div>
<div class="footer">Footer</div>

CSS

body{padding:0; margin:0;}
div {
    display:block;
    position:relative;
    padding:20px 0;
    text-align:center;
    width:100%;
}
.header {
    background:green;
    color:#fff;
}
.body {
    margin:10px 0;
    background:blue;
    color:#fff;
}
.footer {
    background:black;
    color:#fff;
}

jQuery

$(document).ready(function(){
var dh = $(document).height(),
    fh = $(".footer").outerHeight(),
    bh = $("body").height();

if(bh<dh)
{
    $(".footer").css({
        "position":"fixed",
        "display":"block",
        "top":(dh-fh)+"px"
    });
}
});

【讨论】：