[求]將 div 置底的jQuery plugin

javascript 網頁設計程式設計 jquery

匿名 2012-01-14 19:30:04 ‧ 8857 瀏覽

分享至

想要問一下有沒有人知道用jQuery 將 div 置底的plugin，是將div置底在瀏覽器下面，也就是不管scroll bar怎麼拉，都會看到這個div ，因為要支援各個瀏覽器，所以不要用css來做控制，因為ie6不支援position:fixed，也就是希望是純jQuery來控制，不是去改變css設定，請知道的大大救援一下m(- -)m

ccutmis iT邦高手 2 級 ‧ 2012-01-15 23:41:31 檢舉

在google搜尋"jquery footer bottom"
可以找到不少~例如這個...
http://johnpatrickgiven.com/jquery/pinned-footer/

匿名檢舉

大大提供的這個jquery也是用css去做控制，套用過後ie6也是沒辦法正常運作

還是很感謝你的幫忙

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2012-01-16 12:06:43

最佳解答

希望有幫助~!

&lt;pre class="c" name="code">
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8" />
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">&lt;/script>
&lt;script type="text/javascript">

$(document).ready(function() { setContainer();setFooterTop(); });

function setContainer(){
	var winH=$(window).height();
	var docH=$(document).height();
	$('#container').css('height',winH-$('#footer').height()+'px');
	$('#container').css('width',$(window).width()+'px');
}

function setFooterTop(){
	var winH=$(window).height();
	var docH=$(document).height();
	$('#footer').css('top',winH-$('#footer').height()+'px');
	$('#footer').css('width',$(window).width()+'px');
}
$(window).resize(function() { setContainer();setFooterTop(); });
&lt;/script>
&lt;style type="text/css">
body{margin:0;}
#container{overflow-x:hidden;overflow-y:auto;position:absolute;top:0px;left:0px;background:#ccc;}
#footer{
position:absolute;top:0px;left:0px;
background:#aaa;width:100%;height:50px;text-align:center;line-height:50px;
}
&lt;/style>

&lt;body scroll="no">
&lt;div id="container">
  &lt;h3>這是標題&lt;/h3>
  &lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>
  &lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>
  &lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>&lt;p>段落&lt;/p>
&lt;/div>
&lt;div id="footer">我是版權宣告區&lt;/div>