Viewport-Percentage (or Viewport-Relative) Lengths

Viewport-Percentage Lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

  • vh   (viewport height)
  • vw   (viewport width)
  • vmin   (viewport minimum length)
  • vmax   (viewport maximum length)

What exactly is vmin and vmax?

  • 1vmin assumes a value of the smallest between 1vh and 1vw.
  • 1vmax assumes a value of the largest between 1vh and 1vw.

FROM stackoverflow

Make div 100% height of browser window/设置div等于浏览器的高度的更多相关文章

  1. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  2. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  3. 如何设置div的宽度为100%-xx px?

    如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...

  4. Div内有ul li元素,Div设置高度100%,谷歌IE下li过多会显示滚动条,而火狐下就会滚动条就不起作用,li会撑大Div

    产品上也许是用了过多iframe问题,自己做了demo没有这种情况 解决办法: 设置Div的display样式为-moz-inline-grid -moz-代表火狐私有属性,使用自己的div样式就可以 ...

  5. jQuery设置div的自适应布局

    一.HTML代码: <div class="ui-wraper" id="Wraper"> </div> 二.CSS代码: html { ...

  6. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  7. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  9. 设置DIV根据内容自动调整高度的三个方法

    Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...

随机推荐

  1. android-数据存储之外部file存储(sdcard)

    一.基础概要 1.说明: 1>应用程序运行用到的数据文件可以保存到sd卡中 2>文件类型:任意 3>数据保存路径: 路径1:/storage/sdcard/Android/data/ ...

  2. Eclipse设置注释模板

    设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...

  3. ZK 长时操作带进度条

    LongProcess.zul: <?xml version="1.0" encoding="UTF-8"?> <window id=&quo ...

  4. Distinct删除重复数据时 自定义的方法比较【转】

    最近项目中在用Linq Distinct想要将重复的资料去除时,发现它跟Any之类的方法有点不太一样,不能很直觉的在呼叫时直接带入重复数据判断的处理逻辑,所以当我们要用某个成员属性做重复数据的判断时, ...

  5. 继续畅通工程-Floyd

    畅通工程续 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submiss ...

  6. thinkphp自定义权限管理之名称判断

    权限管理,就是给不同的用户分配不同的权限.当用户登录或者操作时候进行判断,来阻止用户进行权限以外的操作.本次讲的是当用户登录一刻,只显示权限开启的内容. 一.建立数据库. 1.权限表funcla.来存 ...

  7. WordPress的body_class()函数详解

    wordpress的body_class()函数,顾名思义,这个函数根据不同的页面类型为body标签生成class选择器,从而让设计人员可以各方便灵活的控制不同页面中的各个元素.本文对这一函数进行了详 ...

  8. php中英字符串截取

    <?php @header('Content-type: text/html; charset=UTF-8'); function Ctruncate($str = '', $len = 0, ...

  9. free一个无效指针

    1. 错误描述:   刚才写了一个删除单链表的结点函数, 参数是 指向链表的指针和链表中指定删除的结点的指针.  当我free这个待删除的结点, 结果报错. 2. 为什么会报错? 我查了查MSDN, ...

  10. 常用的不熟的sql语句

    1.select * from dbo.Consum_AccountPaymentLog Where CHARINDEX(',1,',','+RelatedUserIDs+',')>0 char ...