移動端頁面高度設置

原創 心之苍苍 2020-06-30 10:38

最近開發移動端頁面，需要給頁面設置背景顏色，但是發現高度不夠，但是設置高度height：100% 後，沒有效果。

設置爲height：100vh 後，可以使用 不過我這裏出現了 頁面滾動 。然後查詢資料後，發現了一個CSS3的屬性 fill-available 可以自動填滿可用高度。相關屬性有fill-available, max-content, min-content, fit-content。

有興趣可以看看

https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

輸入框限制不允許輸入中文

思路：在輸入過程中 將中文替換爲"", string.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g, '');

心之苍苍 2020-06-30 10:38:42

Vue中滾動條回到頂部及動畫化（緩慢回滾）

開發首頁出現滾動條回到頂部的需求，也不能直接回到，要緩慢回滾。 舊項目使用的是JQuery的 $("html,body").animate({scrollTop: 0}, 500); //動畫化滾動到頂部。var scrolltop=$(

心之苍苍 2020-06-30 10:38:42

math.js在Vue項目中的使用和封裝

項目中出現金額的四則運算精度錯誤問題，引入math.js來解決，並封裝四則運算方法。 安裝: npm install mathjs 引入方式一：在main.js中， //網上查詢得來 import * as math from 'math

心之苍苍 2020-06-30 10:38:41

CSS動畫屬性/重繪重排組合層/GPU加速 渲染優化相關及聯繫

1、現代瀏覽器，比如chrome，firefox都支持硬件加速，GPU加速功能，開啓後，使用相關CSS屬性，3D API，canvas等，都會默認用GPU渲染的方式去繪製圖像。 瀏覽器渲染的過程，網上圖片雜且準確性出處都有待考究，

Lawliet_ZMZ 2020-06-26 20:46:55

JS的基本語法

1、什麼是表達式和語句 表達式是可以被求值的代碼,而語句是一段可執行代碼。 2、標識符的規則 標識符可以由大寫字母、小寫字母、下劃線（_）和數字0~9組成，但必須是以大寫字母、小寫字母或下劃線 _ 開頭 3、if else語句 語

70kggg 2020-06-25 09:14:10

JS函數的執行時機

1. 爲什麼如下代碼會打印 6 個 6 let i = 0 for(i = 0; i < 6; i++){ setTimeout(()=>{ console.log(i) },0) } 當setTimeout()

70kggg 2020-06-25 09:14:10

JS對象基本用法

1：聲明對象的兩種語法 第一種：let obj = {name:‘jack’,age:18} 第二種：let obj2 = new Object({name:‘jack’,age:18}) 2：如何刪除對象的屬性 delete o

70kggg 2020-06-25 09:14:10

js 校驗是否是全空格

js校驗輸入框，輸入的是否只是空格，不包含其他內容 $('#input').val().trim().length === 0;  

鲤鱼和龙虾 2020-06-22 23:49:16

jspdf + html2canvas 開發前端pdf導出功能記錄

目錄 插件 實現 簡單分頁 進一步分頁 關於html2canvas的一點小經驗 最近在開發項目的時候，接到了一個需求。聽起來是比較簡單的，將後臺系統的報表以pdf文件的形式導出。excel導出,圖片導出都做過了，現在輪到pdf了。在實現的

Hws有梦想 2020-06-21 00:17:13

Koa項目總結三：ejs和art-template模板引擎讓頁面顯示動態數據

這裏，我主要整理兩種模板引擎的使用，ejs和art-template： 1. EJS模板引擎的使用： 1.1 安裝koa-views和ejs： npm install koa-views --save npm install ejs -

u前端人 2020-06-20 11:13:14

列表類的實現

第3章——列表類的實現 首先定義一個List類,在構造函數constructor體內設置2個變量dataStore和 listSize分別用來初始化一個空數組保存列表元素和列表元素個數，之後是一些方法的實現：👇👇👇 class L

smile@qingqing 2020-06-20 06:59:35

git配置與常用命令

密鑰 設置SSH key（mac） 生成ssh key 首先檢查是否已生成密鑰cd ~/.sshls，如果返回的ls有id_rsa.pub 和 id_dsa.pub兩個文件,則密鑰已經生成。 如果沒有密鑰，則通過$ ssh-k

smile@qingqing 2020-06-20 06:59:33

npm構建保存 code ELIFECYCLE解決辦法

參考文檔https://blog.csdn.net/gh254172840/article/details/78871573 　　使用npm構建報錯 　　 　　解決辦法，進入工作目錄 1 2 3 4 rm -rf node_mod

u前端人 2020-06-20 02:56:53

SASS好在哪裏？

SASS好在哪裏？ 引入變量 sass讓人們受益的一個重要特性就是它爲css引入了變量。你可以把反覆使用的css屬性值 定義成變量，然後通過變量名來引用它們，而無需重複書寫這一屬性值。 $nav-color: #F90; nav

一鲸落.万物生 2020-06-19 12:32:32

JS（數組操作）

數組操作 forEach() forEach我們很常用，它只是for循環的簡單替代 arr.forEach((val,index,arr)=>{ console.log(val,index,arr) }) map() 與fo

一鲸落.万物生 2020-06-19 11:19:08