在移动端开发的过程中，常常会遇到头部高度是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. 使用meta属性禁用手机浏览器的缩放功能

    在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...

  2. CentOS 7.1重启后无法进入Gnome

    问题环境: 新买的Intel NUC主机,通过光驱安装CentOS 7.1版本,安装过程没问题. 安装完毕后,重启. 坏了! 只能看到黑屏和一只可以移动的鼠标. 只能说说我的排查思路: 一.首先要进入 ...

  3. Python操作列表常用方法

    Python操作列表的常用方法. 列表常用的方法操作列表以及小例子: 1. Append 在列表末尾添加元素,需在列表末尾添加元素,需要注意几个点: A. append中添加的参数是作为一个整体 &g ...

  4. atitit.判断时间重叠方法总结 java c++ c#.net js php

    atitit.判断时间重叠方法总结 java c++ c#.net  js php 1. 判断时间重叠具体流程思路 1 2. 重叠算法 实际上就是日期集合跟个时间集合的的交集(乘法算法) 1 3. 代 ...

  5. [POJ 1236][IOI 1996]Network of Schools

    Description A number of schools are connected to a computer network. Agreements have been developed ...

  6. android.animation(3) - ValueAnimator-ofObject(TypeEvaluator evaluator, Object... values)

    一.ofObject()概述 前面我们讲了ofInt()和ofFloat()来定义动画,但ofInt()只能传入Integer类型的值,而ofFloat()则只能传入Float类型的值.那如果我们需要 ...

  7. SAP ECC6安装系列一：安装前硬件和软件准备

    原作者博客 http://www.cnblogs.com/Michael_z/ ======================================== 写在前面的罗嗦话 一晃就是5年,前几天 ...

  8. excel鼠标拖选慢shift选择快的问题

    今天遇到个惊天大坑,关于excel的,最近,一直在调查这个东西,刚开始真的是毫无头绪,反正现在就是excel的值的copy会偶尔慢,慢的情况也是不明白,就是稀里糊涂的调查. 刚开始连100%再现这个b ...

  9. wcf客户端终结点样本集合

    1. <bindings> <basicHttpBinding> <binding name="BasicHttpBinding_IUser" /&g ...

  10. jQuery 中 attr() 和 prop() 方法的区别<转>

    前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQ ...