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. Unity3D游戏引擎最详尽基础教程

    第一节 加入重力 我们先打开Unity3d,新建一个场景(Scene),新建的时候应该会有对话框要求你加入哪些Asset Package,记得选择Physics Material,因为后面我们一定要用 ...

  2. linux查看主机端口进程命令

    1.查看主机信息 # more /etc/hosts # Do not remove the following line, or various programs # that require ne ...

  3. CloudSim样例分析

    自带八个样例描述: cloudsim-2.1.1\examples目录下提供了一些CloudSim样例程序,每个样例模拟的环境如下: (1)CloudSimExample1.Java:创建一个一台主机 ...

  4. JSP页面以及简单的指令

    —JSP(Java Server Pages)是指: —在HTML中嵌入Java脚本语言 —由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本语言命令 —然后将生成的整个页面信息返回给客户端 页 ...

  5. Maven入门系列(二)--设置中央仓库的方法

    原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...

  6. 关于Java擦除特性

    package thinkingInJava; /* * 模拟擦除 */ public class SimpleHolder { private Object obj ; public void se ...

  7. sqlserver集合操作

    SQLServer2005通过intersect,union,except和三个关键字对应交.并.差三种集合运算 详细如下 use tempdb go if (object_id ('t1' ) is ...

  8. Bootstrap:表格和栅格分页

      拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCT ...

  9. angularJs禁用或启用输入框指令ng-disabled="true"

    ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea). 如果 ng-disabled 中的表达式返回 true 则表单字段将被禁 ...

  10. TCP_NODELAY

    启用TCP_NODELAY的情况下: 客户端程序C连接到服务器程序S: C仅接受数据,S仅发送数据 S循环调用send发送长度很小的数据包比如:10字节; 在C上用任务管理器查看到C的上行流量大约是下 ...