iT邦幫忙

0

[求]將 div 置底的jQuery plugin

匿名 2012-01-14 19:30:047766 瀏覽

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

ccutmis iT邦研究生 3 級 ‧ 2012-01-15 23:41:31 檢舉
在google搜尋"jquery footer bottom"
可以找到不少~例如這個...
http://johnpatrickgiven.com/jquery/pinned-footer/
匿名 檢舉
大大提供的這個jquery也是用css去做控制,套用過後ie6也是沒辦法正常運作落寞
還是很感謝你的幫忙謝謝

2 個回答

2
ccutmis
iT邦研究生 3 級 ‧ 2012-01-16 12:06:43
最佳解答

希望有幫助~!

<pre class="c" name="code">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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(); });
</script>
<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;
}
</style>

<body scroll="no">
<div id="container">
  <h3>這是標題</h3>
  <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
  <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
  <p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</div>
<div id="footer">我是版權宣告區</div>
0
duckfly
iT邦新手 5 級 ‧ 2012-01-16 09:44:27

google: ie6 position fixed

http://tagsoup.com/cookbook/css/fixed/
http://www.howtocreate.co.uk/fixedPosition.html

參考看看,不一定得要用jquery

我要發表回答

立即登入回答