如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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下安装gulp[转]

    一.准备工作 1.什么是 npm? npm 是 nodejs 的包管理工具,主要功能就是管理.更新.搜索.发布node的包.Gulp 就是通过 NPM 安装的.关于 NPM 中文介绍,这里有一篇非常不 ...

  2. C 标准库 - <limits.h>

    C 标准库 - <limits.h> 简介 limits.h 头文件决定了各种变量类型的各种属性.定义在该头文件中的宏限制了各种变量类型(比如 char.int 和 long)的值. 这些 ...

  3. WPF03(样式)

    说起样式,大家第一反应肯定是css,好的,先上一段代码. 1 html{border:0;} 2 ul,form{margin:0; padding:0} 3 body,div,th,td,li,dd ...

  4. win7自带照片查看器

    win10如何找回自带的照片查看器   方法/步骤   1 首先,我们打开一个记事本,可以点击win+r打开运行框,然后在运行框中输入notepad.或者在桌面右键点击里面的新建,然后在新建中找到文本 ...

  5. Django-models-m2m

    在Django的orm中,如果有多对多的字段,那么他的第三张表时自己生成的,参考官方文档发现第三张表可以自己写↓: 而且第三张表好像是可以自定制的 from django.db import mode ...

  6. .NET MVC 4 实现邮箱激活账户功能

    这篇文章是<.NET MVC 4 实现用户注册功能>的后续开发,实现发送激活链接到注册用户邮箱,用户在邮箱打开链接后激活账户的功能. 首先实现发送邮件的功能,在管理用户注册的control ...

  7. 数据库中表的复杂查询&amp;分页

    一.数据库中表的复杂查询 1)连接查询 1.0连接的基本的语法格式: from TABLE1 join_type TABLE2 [on (join_condition)][where (query_c ...

  8. javaScript和jQuery自动加载方法

    一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"& ...

  9. sublime 快捷键 汇总--长期

    Ctrl+P 输入当前项目中的文件名,快速搜索文件 Ctrl+G 输入数字跳转到该行代码 Ctrl+R 输入关键字,查找文件中的函数名 Ctrl+: 输入关键字,查找文件中的变量名.属性名等 Ctrl ...

  10. iOS UILabel文字缩进

    使用NSMutableParagraphStyle实现label文字首尾的缩进 NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphSty ...