頁尾頁

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