知识点:

viewport:可视窗口,也就是浏览器。
vw Viewport宽度, 1vw 等于viewport宽度的1%
vh Viewport高度, 1vh 等于viewport高的的1%

calc()使用通用的数学运算规则,但是也提供更智能的功能:

1、使用“+”、“-”、“*” 和 “/”四则运算;
2、可以使用百分比、px、em、rem等单位;
3、可以混合使用各种单位进行计算;
4、表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
5、表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
   
例如 :设置div元素的高度为当前窗口高度-100px
     div{
       height: calc(100vh - 100px);     
    }

兼容性:支持ie9及以上,移动端可以用的飞起了

css3让元素自适应高度的更多相关文章

  1. float元素的父元素自适应高度

    当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种. 1.对父元素设置固定高度 2.使用clear清除浮动 3. ...

  2. 【css】子元素浮动到了父元素外,父元素没有随子元素自适应高度,如何解决?

    正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...

  3. css控制父元素下的子元素自适应高度,且高度一致

    css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...

  4. css3动态计算元素的高度及宽度

    1.px     像素,我们在网页布局中一般都是用px. 2.百分比     百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度 ...

  5. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  6. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

  7. textarea自适应高度

    最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...

  8. 微信端应用 ionic实现texarea 自适应高度

    最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...

  9. Html-Css-iframe的自适应高度方案

    先看一个示例,有两个页面,1.html通过iframe嵌入2.html,两个页面都是同域的 a.html <!DOCTYPE html> <html> <head> ...

随机推荐

  1. Java反射机制(二):通过反射取得类的结构

    在反射运用过程中,如果你想得到一个类的完整结构,那么就要使用到java.lang.reflect包中的几个类: · Constructor  表示类中的构造方法 · Field  表示类中的属性 · ...

  2. jQuery中的siblings()的用法

    siblings  英文翻译    兄; 弟; 姐; 妹;   的意思 siblings()用于查找当前元素的同胞元素,就是拿到当前元素的兄弟节点(不包括自己). 给当前元素设置新的样式,并删除当前元 ...

  3. python单例模式的实现与优化

    python单例模式的实现与优化 阅读目录(Content) 单例模式 实现单例模式的几种方式 1.使用模块 2.使用装饰器 3.使用类 4.基于__new__方法实现(推荐使用,方便) 5.基于me ...

  4. jstack简介

    jstack:Java进程中线程的堆栈信息跟踪工具 功能简介 jstack常用来打印Java进程/core文件/远程调试端口的Java线程堆栈跟踪信息,包含当前虚拟机中所有线程正在执行的方法堆栈信息的 ...

  5. JS开发常用工具函数 总结

    js原生工具库 1.isStatic:检测数据是不是除了symbol外的原始数据 */ function isStatic(value) { return( typeof value === 'str ...

  6. 【React】 百度地图API

    百度地图 开发文档 :http://lbsyun.baidu.com/index.php?title=jspopular 调用接口 需要 内置加载一个 百度api文件    使用自己的ak  申请一个 ...

  7. Lavarel之环境配置 .env

    .env 文件位于项目根目录下,作为全局环境配置文件. 1. 配置参数 // 运行环境名称 APP_ENV=local // 调试模式,开发阶段启用,上线状态禁用. APP_DEBUG=true // ...

  8. P1080 探测器

    题目描述 一个 n*n 的网格图上有 m 个探测器,每个探测器有个探测半径r,问这 n*n 个点中有多少个点能被探测到. 网格图上的点的坐标从(1,1)到(n,n). 输入格式 第一行3个整数n,m, ...

  9. Linux 内核存取 I/O 和内存空间

    一个 PCI 设备实现直至 6 个 I/O 地址区. 每个区由要么内存要么 I/O 区组成. 大部分 设备实现它们的 I/O 寄存器在内存区中, 因为通常它是一个完善的方法(如同在" I/O ...

  10. 牛客小白月赛15A 斑羚飞渡

    链接:https://ac.nowcoder.com/acm/contest/917/A 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言262144K 64b ...