如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. Rebuild account Windows 10 in Domain

    cmd ‘administrator’Regedit 1. Check User Profiles HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\C ...

  2. 记事本中写c/c++程序在Windows下运行

     1.在桌面新建一个1.c,内容例如以下: 2．打开cmd命令行窗体,进入CodeBlock安装文件夹下的:E:\Installed\CodeBlocks\MinGW.然后运行mingwvars. ...

  3. python（25）- 面向对象补充Ⅰ

    一.如何使用类 1.实例化:创建对象 类名加括号就是实例化,会自动触发__init__函数的运行,可以用它来为每个实例定制自己的特征. 例子一 x=int(10) print(x) python中一切 ...

  4. css-装饰

    css -在标签上设置style样式 background-color:#2356a1 height:48px -编写样式方法 1.标签的style属性 2.鞋子head里面,style标签中编写 - ...

  5. 2017-07-19-CR 和 LF

    CR 和 LF CR - Carriage Return 回车 LF - Line Feed 换行 Carriage 打字机滑轨.老式打字机,打字时,滑轨从左往右移动,一行打完了,需要把滑轨调回到最左 ...

  6. 物联网网络编程和web编程

    本文是基于嵌入式物联网研发project师的视觉对网络编程和web编程进行阐述. 对于专注J2EE后端服务开发的同学来说,这篇文章可能略微简单.可是网络编程和web编程对于绝大部分嵌入式物联网proj ...

  7. windows快捷键大全（转载）

    常见用法: F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F10或ALT 激活当前程序的菜 ...

  8. EasyPusher：基于live555的DarwinInjector实现的RTSP直播推送程序

    先简单介绍一下EasyPusher的功能,后面再对具体内部架构做介绍: EasyPusher:https://github.com/EasyDarwin/EasyPusher EasyPusher是什 ...

  9. Aspose.cells 读取Excel表中的图片问题

    一.说明 本文主要是讲解,怎么使用aspose.cells读取Excel表中的图片,并把图片转换成流或是image对象. 二.开发环境说明 开发工具vs2012,c#语言, 三.Aspose.cell ...

  10. java之冒泡排序

    //冒泡排序(Bubble Sorting)的基本思想是:通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码,若发现逆序则交换,使排序码较小的元素逐渐从后部移向前部(从下标较大 ...