移动端页面高度设置

原創 心之苍苍 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