文章詳情頁
前端 - 移動(dòng)端頁面如何實(shí)現(xiàn)背景圖在沒有內(nèi)容時(shí)在一屏顯示？
瀏覽：141日期：2024-05-19 17:28:17
問題描述
一個(gè)內(nèi)容詳細(xì)頁面底部的背景中有個(gè)圖片，如果內(nèi)容多的話（文字超過一屏）背景就會(huì)順利展示，如果文字少的話就撐不起來這個(gè)背景。我只好設(shè)置這個(gè)頁面最小為一屏高度
<html><head></head><body><p class='container-show'></p></body></html>html,body{height:100%;}.container-show{min-height:100%}
我的所有頁面都是用的一個(gè)css文件，直接把html,body{height:100%;}放到css文件中，會(huì)不會(huì)影響的其他頁面？有沒有更好的方法？
問題解答
回答1：我問一下樓主，你是指要背景只能一頻？即假設(shè)內(nèi)容有兩屏，背景也只能一屏？那多出來的那一屏怎么辦？默認(rèn)為灰色？如果確實(shí)要這樣的效果，你可以定位一個(gè)p(和你的.container同級)，然后設(shè)置min-height:100%；position:absolute;background:url() no-repeat;z-index-10;就可以了，那個(gè)背景永遠(yuǎn)只有一屏，無論你的內(nèi)容有多少
回答2：可以通過js獲取窗口高度來設(shè)置p高度。
var H = $(window).height();$(’.H’).css(’min-height’,H+’px’);
相關(guān)文章：
1. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？2. macos - 無法source activate python273. java - butterknife怎么綁定多個(gè)view4. java - 同步/異步與阻塞/非阻塞之間的差異具體是什么？5. javascript - 打算寫一個(gè)c++的node圖像處理模塊,有沒有推薦的c++圖片處理庫？6. css3 讓圖片變成灰色(filter)，但針對IE11瀏覽器無效7. android - Genymotion 模擬器可以做屏幕適配檢測嗎？8. html5 - 前端面試碰到了一個(gè)緩存數(shù)據(jù)的問題，來論壇上請教一下9. html - 非微信官方網(wǎng)頁，將由微信轉(zhuǎn)換為手機(jī)預(yù)覽模式10. 我在導(dǎo)入模板資源時(shí)遇到無法顯示的問題，請老師解答下
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備