如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. Android 适配器教程 （六）

    我们的适配器学习已经接近尾声了.尽管这不是一个大问题,可是确实是值得学习的一块知识,回忆一下之前五讲的知识.我们已经学到了非常多东西了. 在之前五讲中.我们已经由浅入深的认识了适配器,从最简单的Lis ...

  2. android:使用gallery和imageSwitch制作可左右循环滑动的图片浏览器

    为了使图片浏览器左右无限循环滑动 我们要自己定义gallery的adapter 假设要想自己定义adapter首先要了解这几个方法 @Override public int getCount() { ...

  3. mysql生产环境____主从同步修复案例

    一.   硬件环境 Master: Dell R720 Intel(R)Xeon(R) CPU E5-2640 v2 @ 2.00GHz MEM 64G.disk 4*2.5 SAS  网络4* 千兆 ...

  4. [转]si设置

    好吧,我有代码格式的强迫症,代码不整齐,我看的都头疼,之前一直喜欢用SourceStyler C++的,但是这个在win7下貌似不能使用,只能转向astyle了. http://www.cnblogs ...

  5. 【课程笔记】比特币和数字货币技术[Bitcoin and Cryptocurrency Technologies] week1

    源地址(可能要FQ):https://www.coursera.org/learn/cryptocurrency/home/welcome 1.1 Cryptographic Hash Functio ...

  6. svn 命令个

    svn 命令行下常用的几个命令 标签: svnpathdelete工作urlfile 2011-11-28 08:16 128627人阅读 评论(1) 收藏 举报  分类: 版本控制(8)  版权声明 ...

  7. iOS_12_tableViewCell的删除更新_红楼梦

    终于效果图: Girl.h // // Girl.h // 12_tableView的增删改 // // Created by beyond on 14-7-27. // Copyright (c) ...

  8. opencv中的SVM图像分类（二）

    opencv中的SVM图像分类(二) 标签: svm图像 2015-07-30 08:45 8296人阅读 评论(35) 收藏 举报  分类: [opencv应用](5)  版权声明:本文为博主原创文 ...

  9. nginx的源代码分析--间接回调机制的使用和类比

    nginx使用了间接回调机制.结合upstream机制的使用来说明一下,首先明白几个事实: 1)事实上ngxin和下游client的连接使用的是ngx_http_connection_t,每一个连接相 ...

  10. stretchableImageWithLeftCapWidth

    本文转载至 http://www.cnblogs.com/bandy/archive/2012/04/25/2469369.html (NSInteger)topCapHeight 这个函数是UIIm ...