如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. Linux 设备驱动开发 —— platform设备驱动应用实例解析

    前面我们已经学习了platform设备的理论知识Linux 设备驱动开发 —— platform 设备驱动 ,下面将通过一个实例来深入我们的学习. 一.platform 驱动的工作过程 platfor ...

  2. Why is chkconfig no longer available in Ubuntu?

    Question: I can not use chkconfig tools in Ubuntu 12.10 It's a very useful tools to configure the se ...

  3. [c#菜鸟]lambda表达式

    what 一.定义 Lambda 表达式是一种可用于创建 委托 或 表达式目录树 类型的 匿名函数 .通过使用 lambda 表达式,可以写入可作为参数传递或作为函数调用值返回的本地函数.(微软) 理 ...

  4. Linux以下基于TCP多线程聊天室（server）

    接上篇博文,本文是server端的实现,主要实现的功能,就是现实client的连接.转发client发送的消息.以及client掉线提示等功能,同一时候能够在这这上面扩展和TCP以及线程相关的功能木块 ...

  5. odoo高级物流应用：跨厂区生产

    业务情景 半成品在分厂生产,然后再在总厂组装 半成品所需的原材料存储在分厂的仓库 总厂需要的原材料储存在总厂的仓库 公用的原材料储存在总厂的仓库     解决方案 使用仓库间的供应 设置合适的Rout ...

  6. 【转载】C#中的==、Equal、ReferenceEqual

    1. ReferenceEquals, == , Equals Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不是相等. a) ReferenceEquals ...

  7. Cadence SPB 16. 6 安装步骤

    1.首先下载Cadence Allegro SPB orCAD16. 6 安装包,单击我,下载之后运行其中的setup.exe,然后先安装第一项License Manager

  8. URL 截取参数 正则

    用处很多,记录下. function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&am ...

  9. C#Soket组播

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  10. 改动UITextfield的Placeholder字体的颜色

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...