Question

我在我的网站上使用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;
}

任何人都有任何解决方法吗？

非常感谢。

Answer 1

试试这个，它会根据内容或页面底部放置页脚，具体取决于页面中的内容：

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

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

Answer 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"
    });
}
});

在页面末尾的页脚

2 个答案: