設(shè)置內(nèi)容高度100%jQuery移動我正在開發(fā)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;}但是頁面顯示如下我不想讓內(nèi)容和頁腳內(nèi)容高度之間的空間直到頁腳
3 回答
鴻蒙傳說
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個贊
更新
我增加了一個純CSS解下面。
我注意到.ui-contentDIV沒有100%填充空間，它仍然缺少2px..那些來自固定工具欄標(biāo)頭和頁腳，就像他們一樣margin-top: -1px和margin-bottom: -1px分別。(小提琴)
在此之前并不明顯，因?yàn)閮烧叨际?em>頁div和頁腳同樣的黑色data-theme="b"..我變了.ui-page氏background-color: red;顯示出不同之處。
因此，要取得最好的效果，就必須檢查是否工具欄都是固定的。下面是增強(qiáng)型解決辦法。
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；但是，在移動設(shè)備上沒有滾動。body其高度設(shè)置為99.9%和.ui-page到100%.
GCT1015
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個贊
他的更新小提琴
將他的縮放代碼放入一個函數(shù)中，并將滾動(0，0)添加到頂部。這消除了一些設(shè)備在方向變化(從縱向到橫向)時可能出現(xiàn)的奇怪問題。
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);}然后，應(yīng)該在pagecontainerShow上調(diào)用該函數(shù)(如果jqm1.3為Pageshowif)，您應(yīng)該添加一個處理程序，用于窗口大小和方向的更改，以便在viewport大小更改時保持內(nèi)容的適當(dāng)大?。?/p>
$(document).on(?"pagecontainershow",?function(){
????ScaleContentToDevice();????????});$(window).on("resize?orientationchange",?function(){
????ScaleContentToDevice();});
瀟湘沐
TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個贊
純CSS解
重要說明：對特定頁面使用此解決方案，您不希望頁面或頁面的內(nèi)容垂直滾動。因?yàn)榕迤?code>height將設(shè)置為
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?*/}
添加回答
舉報
0/150
提交
取消