在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，有时候是用js来处理，现在用css的calc是非常方便的:

.container{

  height: calc(100% - 40px);  //注：减号前后要有空格，否则很可能不生效！！

}

height:calc(100% - 40px)的更多相关文章

  1. 微信小程序 - height: calc(xx - xx)；无效

    遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...

  2. height为100%的问题

    问题描述 很多同学,对于设置div 的高度为100%时,有疑惑. 设置div 的高度为100%,意思是此 div 的高度 铺满父元素. 那么 怎么使 div 铺满浏览器屏幕? 代码 <!DOCT ...

  3. width: calc(100% - 20px);

    width: calc(100% - 20px); css3 的 calc()函数.这里的意思是设置宽度比100%的宽度少20px. calc()函数用于动态计算长度值. calc()函数支持 &qu ...

  4. 解决html设置height：100%无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  5. 在 Less 中使用 calc() 的坑：height: calc(~"50% - 21px");

    注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...

  6. width: calc(100% - 80px); 屏幕自适应方法

    width: calc(100% - 80px); 屏幕自适应方法

  7. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  8. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  9. 背景图height：100%显示

    这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...

随机推荐

  1. EF Code First 注意事项

    1.异常“实体类型不存在于上下文中” Context类中不包含该实体类型的DbSet,有可能关联关系没有正确设置

  2. 自己的一个验证电话和ecshop验证电话

    //验证电话 function checkPhone($phone) { $preg_mobile = preg_match("/^1\d{10}$/", $phone ); $p ...

  3. Atitit.软件仪表盘(4)--db数据库子系统-监测

    Atitit.软件仪表盘(4)--db数据库子系统-监测 连接数::: 死锁表列表:死锁基础列表(最近几条记录,时间,sql等) 3.对服务器进行监控,获取CUP,I/O使用情况   4.对数据库进行 ...

  4. [svc]raid基础知识-冷知识

    参阅:磁盘接口与RAID Dell 服务器做Raid 1,raid形象理解(饮水机模型) http://dingyichao.blog.51cto.com/442449/698762 2,raid利用 ...

  5. Redis 学习笔记四 Mysql 与Redis的同步实践

    一.测试环境在Ubuntu kylin 14.04 64bit 已经安装Mysql.Redis.php.lib_mysqludf_json.so.Gearman. 点击这里查看测试数据库及表参考 本文 ...

  6. CSS3多背景应用

    /*多背景应用*/ .wrapper { width: 640px; height: 1000px; margin: auto; background: url(./images/head.jpg) ...

  7. Python 元祖的操作

    注意:元祖定义后不可修改,单个元祖后面必须加逗号,否则认为是字符串:tuple = ('apple',) 1.定义元祖 tuple = ('apple','banana','grape','orang ...

  8. hadoop3: mkdir: cannot create directory `/usr/local/hadoop/bin/../logs’: Permission denied

    1.hadoop3: mkdir: cannot create directory `/usr/local/hadoop/bin/../logs': Permission denied把所有Datan ...

  9. 阿里云高速maven库

    <repository> <id>alimaven</id> <name>aliyun maven</name> <url>ht ...

  10. sama5d3 环境检测　gpio--yk测试

    说明: gpio的MAP关系 yk0--pioA7  yk1--pioA5   yk2--pioA9   yk3--pioA3   yk4--pioA1  yk5--pioA8    (端子从左--& ...