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. java读取属性配置文件工具类

    import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * * 类: ProU ...

  2. QTP功能点笔记

    1.QTP启动应用程序的几种方法 1)用SystemUtil.Run 1 SystemUtil.Run "C:\Program Files (x86)\HP\QuickTest Profes ...

  3. JVM监控和Java应用程序调试

    JConsole.VisualVM监控JVM(JMX) JAVA_OPTS后加:-Dcom.sun.management.jmxremote.port=8999 -Dcom.sun.managemen ...

  4. ng-repeat 嵌套 ng-switch 出错解决

    Error: $compile:ctreq Missing Required Controller Controller 'ngSwitch', required by directive 'ngSw ...

  5. SQL基础巩固1

    直接开门见山------F4 1.查询 对指定的数据表或是视图进行检索查询,找出符合查询条件功能,具体包括以下SQL语法如下所示,其中[]为可选项 Select<列名> From<表 ...

  6. iOS应用架构谈 开篇

    iOS应用架构谈 view层的组织和调用方案 iOS应用架构谈 网络层设计方案 iOS应用架构谈 动态部署方案 iOS应用架构谈 本地持久化方案 缘由 之前安居客iOS app的第二版架构大部分内容是 ...

  7. js 十分精确身份证验证

    checkIdcard:function (idcard) { // 1 "验证通过!", 0 //身份证号码校验错误 var Errors = new Array( " ...

  8. Python开发【杂货铺】：五个知识点搞定作用域

    1.块级作用域 想想此时运行下面的程序会有输出吗?执行会成功吗? #块级作用域 if 1 == 1: name = "lzl" print(name) for i in range ...

  9. asp.net页面间传值方式

    使用asp.net开发项目,必然会在页面间进行传值,本文介绍几种常见的页面传值方式,仅作笔记,以便后续查找使用. 前提:新建两个页面:ValuePage.aspx,ObtainValue.aspx,本 ...

  10. Java提高篇——Java实现多重继承

    多重继承指的是一个类可以同时从多于一个的父类那里继承行为和特征,然而我们知道Java为了保证数据安全,它只允许单继承.有些时候我们会认为如果系统中需要使用多重继承往往都是糟糕的设计,这个时候我们往往需 ...