如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到css3的计算属性,即calc。

用法如下：

内容区域高/宽 = calc(100% - 头部高宽 - 底部高宽)

//这样就可以自适应高度或宽度了。

浏览器高度： document.documentElement.clientHeight

css3计算属性(calc)的更多相关文章

  1. css3中样式计算属性calc()的使用和总结

    calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...

  2. css计算属性 calc()

    left: calc((100vw - 400px) / 2);   calc 进行简单的运算时,运算符号左右各要有一个空格,不然不起作用.

  3. css 计算属性 calc的使用

    宽度等于父元素的宽度减去16像素 高度等于父元素的高度减去16像素 注意:100%和16px   与减号之间必须有空格,否则高度会失效!!!! .box{ width:calc(100% - 16px ...

  4. CSS中新属性calc()

    CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...

  5. 纯CSS实现自动轮播，CSS变量的定义与使用，计算属性的使用

    先来看一下实现的效果: 实现原理: HTML中使用ul>li存放图片 CSS使用CSS3的animation来完成动画 <!-- HTML --> <section class ...

  6. css中新增的属性calc()可以计算使用

    什么是calc: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.可以使用calc()给元素的border.margin.pading.font-s ...

  7. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  8. web 开发：CSS3 常用属性——速查手册！

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  9. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

随机推荐

  1. windows下配置redis集群，启动节点报错：createing server TCP listening socket *:7000:listen:Unknown error

    windows下配置redis集群,启动节点报错:createing server TCP listening socket *:7000:listen:Unknown error 学习了:https ...

  2. treeList获取目录下的所有文件

    /// <summary>/// treeList获取目录下的所有文件/// </summary>public static void InitTreeListGetFiles ...

  3. sql的一些知识_函数_汇总数据

    汇总数据 avg()---------求平均数 值得注意的是:avg()只能用于一个列的平均值查询,多个列的平均值请使用多个avg() avg()忽略null值 count()-------计数(指定 ...

  4. MySQL命令学习(一)

    今天我们来学习一下MySQL中的经常使用命令(MySQL中的命令keyword是不区分大写和小写的): (1)show databases; 显示MySQL中的全部database (2)create ...

  5. mysql的安装、C++訪问mysql数据库、编码设置问题

    一.mysql的安装.这个相对简单,直接去官网下载mysql安装程序.就能够完毕安装过程,网上有非常多安装教程,这个没什么注意事项. 二.C++訪问mysql.主要是用到mysql定义的头文件,内部定 ...

  6. LeetCode85 Maximal Rectangle java题解

    public static int maximalRectangle(char[][] matrix) { int rowNum=matrix.length; if(rowNum==0) return ...

  7. mysql字符太长警告

    用navicateclient,打开相应的数据库. 打开函数.找相应的val()函数,进行编辑,就能够!编辑范围为4000

  8. Unity3D总结：关于射线碰撞

    方法一:Physics.Raycast 光线投射 1.static function Raycast (origin : Vector3, direction : Vector3, distance  ...

  9. 李洪强iOS开发之 - 项目架构

    李洪强iOS开发之 - 项目架构 01 - 在Appdelegate中设置跟控制器 //导入头文件

  10. 认识Gulp

    gulp详细入门教程:http://www.ydcss.com/archives/18 安装gulp 前提:已经安装node.js.npm $ npm install gulp --save-dev ...