設置內容高度100%jQuery移動我正在開發jQueryMobile頁面，其中我的CSS是.ui-content {
background: transparent url('./images/bg.jpg');
background-size : 100% 100%;
min-height: 100%;
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;}但是頁面顯示如下我不想讓內容和頁腳內容高度之間的空間直到頁腳
3 回答
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
更新
我增加了一個純CSS解下面。
我注意到.ui-contentDIV沒有100%填充空間，它仍然缺少2px..那些來自固定工具欄標頭和頁腳，就像他們一樣margin-top: -1px和margin-bottom: -1px分別。(小提琴)
在此之前并不明顯，因為兩者都是頁div和頁腳同樣的黑色data-theme="b"..我變了.ui-page氏background-color: red;顯示出不同之處。
因此，要取得最好的效果，就必須檢查是否工具欄都是固定的。下面是增強型解決辦法。
jqm>=1.3
var?screen?=?$.mobile.getScreenHeight();var?header?=?$(".ui-header").hasClass("ui-header-fixed")???$(".ui-header").outerHeight()??-?1?:?$(".ui-header").outerHeight();var?footer?=?$(".ui-footer").hasClass("ui-footer-fixed")???$(".ui-footer").outerHeight()?-?1?:?$(".ui-footer").outerHeight();/*?content?div?has?padding?of?1em?=?16px?(32px?top+bottom).?This?step
???can?be?skipped?by?subtracting?32px?from?content?var?directly.?*/var?contentCurrent?=?$(".ui-content").outerHeight()?-?$(".ui-content").height();var?content?=?screen?-?header?-?footer?-?contentCurrent;$(".ui-content").height(content);jqm<=1.2
自固定jQueryMobile1.2及更低版本中的工具欄不會-1為top/?bottom，沒有必要做減法。1px從工具欄的.outerHeight().
var?header?=?$(".ui-header").outerHeight();var?footer?=?$(".ui-footer").outerHeight();演示-W/O固定工具欄(1)
(1)在桌面瀏覽器頁面上滾動1 px；但是，在移動設備上沒有滾動。body其高度設置為99.9%和.ui-page到100%.
GCT1015
TA貢獻1827條經驗 獲得超4個贊
他的更新小提琴
將他的縮放代碼放入一個函數中，并將滾動(0，0)添加到頂部。這消除了一些設備在方向變化(從縱向到橫向)時可能出現的奇怪問題。
function?ScaleContentToDevice(){
????scroll(0,?0);
????var?content?=?$.mobile.getScreenHeight()?-?$(".ui-header").outerHeight()?-?$(".ui-footer").outerHeight()?-?$(".ui-content").outerHeight()?+?$(".ui-content").height();
????$(".ui-content").height(content);}然后，應該在pagecontainerShow上調用該函數(如果jqm1.3為Pageshowif)，您應該添加一個處理程序，用于窗口大小和方向的更改，以便在viewport大小更改時保持內容的適當大小：
$(document).on(?"pagecontainershow",?function(){
????ScaleContentToDevice();????????});$(window).on("resize?orientationchange",?function(){
????ScaleContentToDevice();});
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
純CSS解
重要說明：對特定頁面使用此解決方案，您不希望頁面或頁面的內容垂直滾動。因為佩奇
height將設置為100%因此，它不會滾動，您將面臨這樣的情況問題.
全屏：
html,body,#pageID?{?/*?specify?page?*/ ??height:?100%; ??margin:?0; ??padding:?0;}#pageID?.ui-content?{ ??padding:?0;}.ui-content,.ui-content?#full-height-div?{?/*?divs?will?inherit?page's?height?*/ ??height:?inherit;}
固定工具欄(頁眉/頁腳)：
html,body,#pageID?{ ??height:?100%; ??margin:?0; ??padding:?0;}#pageID,#pageID?*?{ ??-webkit-box-sizing:?border-box; ?????-moz-box-sizing:?border-box; ??????????box-sizing:?border-box;}#pageID?.ui-content?{ ??height:?inherit;?/*?inherit?height?without?padding?nor?border?*/}
浮動工具欄：
html,body,#pageID?{ ??height:?100%; ??margin:?0; ??padding:?0;}#pageID,#pageID?*?{ ??-webkit-box-sizing:?border-box; ?????-moz-box-sizing:?border-box; ??????????box-sizing:?border-box;}#pageID?.ui-content?{ ??height:?calc(100%?-?89px);?/*?88px?=?header's?height?44px?and?footer's?44px?plus?1px?*/}
- 3 回答
- 0 關注
- 882 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消