如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. nexus启动报错-----&gt;错误 1067: 进程意外终止。

    1.今天启动nexus报错: 2.错误信息 错误 1067: 进程意外终止. 3.检查发现我之前把jdk升级了. 然而nexus之前指定的jdk将不再生效. 4.解决的方法 找到nexus安装文件夹 ...

  2. Linux mm相关的问题

    [S]为什么High MEM是从896M開始的? As the running kernel needs these functions, a region of at least VMALLOC_R ...

  3. 使用 kexec 快速重启 Linux

    http://www.ibm.com/developerworks/cn/linux/l-kexec/ 简介: 即使您的工作不要求您每天多次重新启动您的 Linux 机器,等待系统启动也实在是一件枯燥 ...

  4. 日常沟通的 3 种模式zz

    一.日常沟通的 3 种模式 根据NLP (Neuro-Linguistic Programming,神经语言程序学),日常沟通的 3 种模式分别是:上堆.下切和平行,它们是什么意思呢? 1.上堆 意思 ...

  5. mysql 中alter语句中change跟modify的区别

    mysql 中alter语句中change和modify的区别可以使用CHANGE old_col_name column_definition子句对列进行重命名.重命名时,需给定旧的和新的列名称和列 ...

  6. datatable的使用

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. xcode打包 提交到iTunesConnect

    1.首先确定发布app的所必要选中或者切换的弄好 比如切换环境到 由测试环境切换到正式环境. 2.打发布包 首先选中Product 然后选中Archive. 3.等待编译. 4.打包成功 会进入到下面 ...

  8. 数据挖掘项目之---通过对web日志的挖掘来实现内容推荐系统

    先说一说问题,不知道大家有没有这样的经验,反正我是经常碰到. 举例1,某些网站每隔几天就发邮件给我,每次发的邮件内容都是一些我根本不感兴趣的东西,我不甚其扰,对其深恶痛绝.         举例2,添 ...

  9. CI框架常识

    1.有两种方法来加载自定义配置文件(如enums.php): <?php if (! defined('BASEPATH')) exit('No direct script access all ...

  10. 开源G711A/PCMA、G711U/PCMU、G726、PCM转码AAC项目EasyAACEncoder

    项目及源码地址:https://github.com/EasyDarwin/EasyAACEncoder EasyAACEncoder 是EasyDarwin开源流媒体服务团队整理.开发的一款音频转码 ...