1. 程式人生 > >頁面高度不夠時,底部固定在下面

頁面高度不夠時,底部固定在下面

JQuery方法:
$(function(){
	lrFixFooter("div.footer");
	//呼叫方法:lrFixFooter("div.footer"); 傳入底部的類名或者ID名

	function lrFixFooter(obj){
		var footer = $(obj);
		var doc = $(document);
		function fixFooter(){
			//如果document的高度小於等於window的高度,就固定定位
			if(doc.height()-4 <= $(window).height()){
				footer.css({
					width:"100%",
					position:"absolute",
					left:0,
					bottom:0 
				});
			}else{
				footer.css({
					position:"static"
				});
			}
		}
		fixFooter();

		$(window).on('resize.footer', function(){
			fixFooter();
		});
		$(window).on('scroll.footer',function(){
			fixFooter();
		}); 
	}
})


相關推薦

頁面高度不夠底部固定下面

JQuery方法:$(function(){ lrFixFooter("div.footer"); //呼叫方法:lrFixFooter("div.footer"); 傳入底部的類名或者ID名

CSS實現自適應高度佈局:頭部底部固定中間自適應鋪滿螢幕剩餘高度中間盒子裡左盒子固定右盒子自適應寬度

如題:頂部底部固定高度,中間部分鋪滿螢幕剩餘高度,中間盒子裡又左盒子固定寬度,右盒子自適應寬度且距左盒子總是20px 主要解決方法是中間盒子的top:40px;bottom:40px;設定。原理是在p

僅使用css當body高度不足讓footer始終底部顯示。

<!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; }

ORA-03206當表空間不夠如何以添加數據文件的方式擴展表空間

style 創建表空間 mage all 註意 flow ada -- 導入 準備導入一個數據庫,大約為33G,開始創建的空庫表空間為自增到20G,結果自然不夠,然後就開始自動擴展表空間大小 使用的如下語句 --自動擴展表空間大小 ALTER DATABASE DA

js-點擊按鈕頁面滾動到頂部底部指定位置

spa fse set pan ott mil otto 頁面 click 之所以筆記一下這個,因為我在項目中經常用到。$(‘.scroll_top‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘},

(轉)iframe 高度100%出現垂直滾動條

分析 out border jsb china href -s 詳細 base 問題 需求是這樣的,iframe在一個div中,並且iframe高度與div一樣,所以設置了iframe高度是100%,結果div出現了滾動條,在排除了padding、margin的因素外,還是

【Web篇03】Spring框架下servlet響應的res在jsp頁面中顯示防止亂碼的操作

首先,在Spring軟體中,找到Web工程,src下的對應的servlet; 在servlet中獲取請求引數之後,給瀏覽器傳送響應之前; 需要鍵入一段程式碼即可,如下: response.setContentType("text/html;charset=UTF-8"); 括號內的

使用Flex 彈性佈局來實現手機端頂部底部固定中間滑動效果

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, max

【iOS】使用URLNavigator進行頁面跳轉push頁面無效

最近在專案中使用URLNavigator遇到了點小坑,使用xcode預設配置新建project,照著demo敲了一通發現不起作用,最後發現原因是預設配置檔案Info.plist中,配置了Main storyboard file base name 即下圖所示 這個配置會影響到Ap

全屏底部被虛擬按鍵遮住

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { getWindow().getDecorView().setSystemUiVisibility(

linux -許可權不夠考慮是否用了sudo這個命令

安裝Python-Markdown時,出現提示錯誤:無法在/usr/local/lib/Python2.7/下面建立markdown 資料夾。提示說這個要求被拒絕了。自己手動建立也無法解決這個問題。後來用sudo mkdir markdown 即解決了問題。 建立好資料夾

iframe 高度100%出現垂直滾動條

簡單來說,iframe=inline frame它是一個內聯元素,預設是跟baseline對齊的,iframe後邊有個看不見、摸不著的行內空白節點, 空白節點佔據著高度,iframe與空白節點的基線對齊,導致了div被撐開,從而出現滾動條,找到原因了,解決方案也

解決ios底部固定輸入框獲取焦點彈出輸入法鍵盤擋住輸入框

ios端比較常見的,就是在頁面底部固定的輸入框,如下,一旦獲取焦點,彈出的輸入法鍵盤就會把input輸入框完全擋住,解決方法很簡單,加上下面的幾行程式碼即可       $(".replay_text").on("click", functi

css 頭部和底部固定中間高度自適應出滾動條 css程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initia

js實現html頁面滾動條向下拉到一定的程度某個div就固定在頂部向上拉返回原位置。

實現程式碼 <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

Jquery頁面滾動條向下拉到div的位置此div就固定在頂部向上拉返回原位置

Div在網頁開啟時固定在某個位置(不一定是網頁的最頂端),當滾動條向下滾動時,頁面的頂部到達此div位置後,此div就固定在網頁的最頂部跟隨移動,當滾動條向上滾動時,頁面頂部高過此div原來的固定位置,此div就定在原位置不再跟隨滾動條移動(相當於返回原來的位置)。 網上找

CSS頁面底部固定的6種方法你確定不想學?

當我們在寫頁面時經常會遇到頁面內容少的時候,footer會戳在頁面中間或什麼?反正就是不在最底部顯示,反正就是很難看,下面要講的佈局就是解決如何使元素粘住瀏覽器底部, 方法一:footer高度固定+絕對定位 html <div class="dui-container"> <hea

頁面內容不夠的時候怎麼讓footer一直底部顯示?

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>html

安卓在ScrollView中巢狀ViewPager設定ViewPager的單個頁面高度隨內容變化

在開發過程中,有時候頁面佈局比較複雜,會使用到ScrollView和ViewPager,如果不進行處理,會出現不顯示ViewPager的子頁面,或者子頁面高度一樣,內容顯示不全,或者是留白太多。我的需求是需要在頁面下面加一個可以左右滑動的分欄,而且兩個分類的頁面高度不一致且不

頁面內容不足以鋪滿螢幕高度footer居底顯示

在專案中常常會遇到這樣的問題:頁面主要內容不足以鋪滿一個螢幕的高度,footer下面就會有白塊剩餘。 現在要實現的效果就是,在主要內容不足以鋪滿整個螢幕的情況下,footer居於螢幕低部顯示,使得整個頁面佔滿螢幕。而當主要內容高度大於整個螢幕高度的時候,footer跟