如何使网页的div元素高度满屏

CSS3 引入了新单位:vwvhvminvmax

(1) vwvhvminvmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗( Viewport)大小来决定的,  1代表  1%,视窗( Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

vw:视窗宽度的百分比( 1vw 代表视窗的宽度为  1%
vh:视窗高度的百分比
vmin:当前  vw 和  vh 中较小的一个值
vmax:当前  vw 和  vh 中较大的一个值

(2) 浏览器兼容
桌面PC:
Chrome:自  26 版起就完美支持(2013年2月)
Firefox:自  19 版起就完美支持(2013年1月)
Safari:自  6.1 版起就完美支持(2013年10月)
Opera:自  15 版起就完美支持(2013年7月)
IE:自  IE10 起(包括  Edge)到现在还只是部分支持(不支持  vmax,同时  vm 代替  vmin

移动设备:
Android:自  4.4 版起就完美支持(2013年12月)
iOS:自  iOS8 版起就完美支持(2014年9月)


使网页的div高度满屏的方法:直接给div的高度设成  height:100vh,即可用让div的高度是视窗的高度了

使网页的div宽度满屏的方法:直接给div的宽度设成width:100vw,即可将div的宽度设成视窗的宽度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值