如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. Raid分类说明 （from mongodb权威指南）

    RAID(Redundant Array of Independent Disk,独立磁盘冗余阵列,旧称Redundant Array of InexpensiveDisk,廉价磁盘冗余阵列) 是一种 ...

  2. HDU 1253：胜利大逃亡（简单三维BFS）

    pid=1253">胜利大逃亡 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  3. Linux/ visual studio 编译使用Poco

    1. 下载源码包.在POCO的官方网站下载最新的POCO源码包.http://pocoproject.org/download/index.html2.解压源码包.下载的文件名是“poco-1.6.0 ...

  4. 【Java编程】Java在dos窗体编译与运行的批处理

    近期在Java编程过程中,常常使用到dos窗体对程序进行编译与执行. 可是不方便之处在于每次都要输入命令进入将要编译的程序的文件夹(事实上也有简单的方法,在文章末尾给出).于是编写了一个配置文件,能够 ...

  5. python（29）- 面向对象练习Ⅲ

    题目: 基于授权定制自己的列表类型,要求定制的自己的__init__方法,   定制自己的append:只能向列表加入字符串类型的值      定制显示列表中间那个值的属性(提示:property)  ...

  6. 8款精美的HTML5图片动画分享

    From:http://geek.csdn.net/news/detail/196250 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图 ...

  7. 每天进步一点点——mysql——Percona XtraBackup（innobackupex）

    一.  简单介绍 Percona XtraBackup是开源免费的MySQL数据库热备份软件,它能对InnoDB和XtraDB存储引擎的数据库非堵塞地备份(对于MyISAM的备份相同须要加表锁).Xt ...

  8. About me --- Connecting the dots

    在这个难以入眠的夜里,乔布斯年在斯坦福的演讲里说的“Connecting the dots”又萦绕耳际,即当我们往回看,就清楚了 自己曾经的生活和现在甚至将来是串联在一起的,这些经历决定了我们事业.生 ...

  9. caffe学习--Lenet5的应用和原理、实现----ubuntu16.04.2+caffe+mnist+train+test

    Lenet5的应用和原理.实现 ----------------------------------------------ubuntu16.04.2------------------------- ...

  10. WPF自定义Popup和弹出菜单

    Popup: <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal& ...