如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. 在A页面刷新父框架中的B页面.(window.parent.?.location="")

    window.parent.leftFrame.location='left.jsp?menuid='+menu.id+'&menuname='+menu.title;

  2. 整合Hibernate3.x

    As of Spring 3.0, Spring requires Hibernate 3.2 or later. Hibernate 3和Hibernate 4有一些区别,所以对于spring而已, ...

  3. python（18）- 协程函数及应用

    协程 def init(func): def wrapper(*args,**kwargs): obj = func(*args,**kwargs) next(obj) return obj retu ...

  4. WPF01(xaml)

    XAML:(转自http://www.cnblogs.com/huangxincheng/archive/2012/06/17/2552511.html) <Window x:Class=&qu ...

  5. yum安装nginx+PHP+Mysql

    #mkdir /var/www/yum_repo 1.nginx安装: 在http://nginx.org/en/linux_packages.html#stable中下载CentOSX对应版本的rp ...

  6. 基于tornado实现的web聊天室

    目录结构: # -*- coding:utf-8 -*- import uuid import json import tornado.ioloop import tornado.web import ...

  7. 深度解析开发项目之 03 - enum的使用

    深度解析开发项目之 03 - enum的使用 01 - 在#import和@interface之间定义typedef enum 注意: 默认是0,1,2,3 02 - 定义可以操作的数据类型的属性 0 ...

  8. iOS8 PUSH解决方法

    本文转载至 http://blog.csdn.net/pjk1129/article/details/39548523     - (void)registerForRemoteNotificatio ...

  9. funhub 独立游戏团队诚邀策划,美术,技术,QA 大大加入(可远程办公)

    我们刚成立的的独立游戏团队,base:广州,团队陆陆续续已经有 6 个成员了,现在还缺的岗位有策划,美术.不过有其 他岗位的仁人志士也可加入. 另外,我们支持远程办公,这是互联网行业的天然优势,一定要 ...

  10. 【计蒜客2017NOIP模拟赛1】

    D1T1 题面 题解:一开始以为傻题,旋转个坐标系就行了,结果光荣爆零~ 结果发现旋转坐标系后,由于多了一些虚点,锤子砸到虚点上了~gg [没有代码] D1T2 题面 题解:计算出每个边对答案的贡献即 ...