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. 1021上课演练----SQL注入与避免（银行系统）

    package com.bank; import java.sql.CallableStatement; import java.sql.Connection; import java.sql.Dat ...

  2. javascript平时小例子①（移动的小div）

    css样式: #box{ width: 300px; height: 300px; background: deepskyblue; position: absolute; margin-right: ...

  3. 关于web-dev-server 记录

    package.json "scripts": { "init": "webpack --progress --config webpack.dev. ...

  4. php中英字符串截取

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

  5. js打开没有地址栏下拉条新窗口

    <script type="text/javascript" language="javascript"> function vNodeAuditL ...

  6. Graph | Eulerian path

    In graph theory, a Eulerian trail (or Eulerian path) is a trail in a graph which visits every edge e ...

  7. 省略号 对单行 多行的css

    .twoline{ display: -webkit-box !important;; overflow:hidden; text-overflow: ellipsis; word-break: br ...

  8. C#winform调用外部程序，等待外部程序执行完毕才执行下面代码

    1.简单调用外部程序文件(exe文件,批处理等),只需下面一行代码即可 System.Diagnostics.Process.Start(“应用程序文件全路径”); 2.如果要等待调用外部程序执行完毕 ...

  9. AspNet Mvc 路由解析中添加.html 等后缀 出现404错误的解决办法

    使用Mvc 有时候我们希望,浏览地址以.html .htm 等后缀名进行结尾. 于是我们就在RouteConfig 中修改路由配置信息,修改后的代码如下 routes.IgnoreRoute(&quo ...

  10. Rotate List || LeetCode

    /** * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * } ...