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

编程之家收集整理的这篇文章主要介绍了如何使网页的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的宽度设成视窗的宽度

总结

以上是编程之家为你收集整理的如何使网页的div元素高度满屏全部内容,希望文章能够帮你解决如何使网页的div元素高度满屏所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的CSS相关文章

在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.wxml内容: 复制密文 点击加密 这是.wxss.encryption{  box-sizing: border-box;  displa
box-shadow在ios下没有显示,但是在android机下显示正常。1、html如下 2、css如下.paScreenTxt{ width:98%; height:200px; display: block; margin: 12px auto; box-shadow: 0px 0px 2px 2px #CCC;}3、在and
我们知道要想让一个组件水平居中,只要设置下面两行代码就可以了:display:block;margin:0px auto;但是给form这样设置,却达不到水平居中的效果。解决方法:给form设置属性width,即给form设置一个宽度。如下面的写法就可以让form水平居中了:width:200px;display:block;margin:0px auto;
li中的span设置float:right不生效:部分html代码如下: 部分css代码如下:li{ display:block;}#one{ float:left;}#two{ float:right;}本意是想让两个span在li中,第一个span左浮动,第二个span右浮动,结果第二个span右浮动没生效,显示的结果还是左
有一张png格式的图片,用css3的animation()配合@keyframes特性,实现图片的上下摇动原图如下:html代码如下:css代码如下:#shake_icon{ width:100px; height:100px; animation: shaking 0.25s linear infinite; -webkit-animation: shak
css3设置box-shadow对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}阴影类型:此参数可选。如不设值,默认投影方式是外阴影outse
在页面中,有时候我们想自己写个遮罩层,让它的宽度和高度都占满整个可见页面区域,css设置好了,但是还是没有得到想要的效果。遮罩层用表示,是body的直接子元素。部分.html代码如下:.css代码如下:#bg{    position:fixed;    top:0px;    left:0px;    right:0px;    bottom:0p
问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息。这时,在<input>中添加属性,一般能达到目的。而在chrom里面就失效。解决方法:浏览器根据t输入框的时,会自动填充账号和密码的输入框。先将作为密码的输入框的type设成:,当点击密码输入框的时候,将其type属性设为:这样问题就解决了。HTML页面代码如下: type="te