height:calc(100% - 40px)
在移动端开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的:
.container{
height: calc(100% - 40px); //注:减号前后要有空格,否则很可能不生效!!
}
height:calc(100% - 40px)的更多相关文章
- 微信小程序 - height: calc(xx - xx);无效
遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...
- height为100%的问题
问题描述 很多同学,对于设置div 的高度为100%时,有疑惑. 设置div 的高度为100%,意思是此 div 的高度 铺满父元素. 那么 怎么使 div 铺满浏览器屏幕? 代码 <!DOCT ...
- width: calc(100% - 20px);
width: calc(100% - 20px); css3 的 calc()函数.这里的意思是设置宽度比100%的宽度少20px. calc()函数用于动态计算长度值. calc()函数支持 &qu ...
- 解决html设置height:100%无效的问题
通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...
- 在 Less 中使用 calc() 的坑:height: calc(~"50% - 21px");
注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...
- width: calc(100% - 80px); 屏幕自适应方法
width: calc(100% - 80px); 屏幕自适应方法
- css中 出现height为100%失效的原因及解决方案
我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...
- CSS设置height为100%无效的情况
CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...
- 背景图height:100%显示
这段时间,写移动端页面,总是遇到背景图在不同的设备上的显示拉伸问题: 本来想写百分比,可是并没有显示,又不想media@ ,换一种思路用img写 群友提供了一个办 html,body{height:1 ...
随机推荐
- nodejs Commander 命令行神器简单示例
gen.js #!/usr/bin/env node var program = require('commander'); program .version('0.0.1') .option('-C ...
- Laravel Eloquent ORM--整理(未转)
转:http://blog.csdn.net/a437629292/article/details/46312695 http://www.jianshu.com/p/cb641a4f3599
- [CentOS] CentOS for vsftpd with MySQL Virtual user
從ubuntu 12.04的安裝手法拿到CentOS來真的有些很大的不同 絕大部分的語法.概念都是差不多的,只是指令上有些差別,跟ubuntu 有不一樣的地方特別拿出來另外說明 要讓vsftpd與my ...
- 微软收购跨平台移动应用开发商Xamarin
微软今天宣布收购移动应用跨平台开发商 Xamarin.收购金额未知.Xamarin 提供了通过 C# 开发 iOS.Android 和 Windows 原生移动应用的工具,以及云端应用測试平台 – 全 ...
- Atitit. 解决80端口 System 占用pid 4,,找到拉个程序或者服务占用http 80服务
Atitit. 解决80端口 System 占用pid 4,,找到拉个程序或者服务占用http服务 这个是http.sys系统服务占用了... net stop http ,三,没法儿终止 1. 寻 ...
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包括: 2 2.1. 主要组件体系结构 2 2.2. WebCore ...
- atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功
atitit,it人怎么样才容易事业成功?? 有以下五种性格的人容易成功 有以下五种性格的人容易成功 一.不撞南墙不回头的人:由于这种人有脚踏实地,做事拼命.不撞南墙不回头的性格特点, 势有不到黄河心 ...
- EditText禁止输空格
1.EditText禁止输空格 editText.setFilters(new InputFilter[]{filter}); private InputFilter filter=new Input ...
- 使用tc对linux中某ip段限速
TC 无需安装,Linux 内核自带例:将IP地址段192.168.1.0/24 上传下载限速为 5M将以下内容添加到/etc/ppp/ip-up文件exit 0上面. down=5Mbituploa ...
- WIN XP 命令汇总
winver检查Windows版本dxdiag检查DirectX信息mem.exe显示内存使用情况Sndvol32音量控制程序sfc.exe系统文件检查器gpedit.msc 组策略regedit.e ...