如果有固定头部高度和底部高度，内容的高度或者宽度想要根据浏览器屏幕自适应的话，可以用到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. 使用c#訪问Access数据库时，提示找不到可安装的 ISAM

    使用c#訪问Access数据库时,提示找不到可安装的 ISAM.例如以下图: 代码例如以下: connectionString = "Provider=Microsoft.Jet.OLEDB ...

  2. odoo生产物流

    odoo生产从raw materials location 自动消耗物料,产成品进入到finish productslocation. 而odoo自动产生的MO[manufacture Order], ...

  3. WMS8_基本操作

    建立分拣[收货.出货.领料]         点击仪表盘上的任何一个 All operations 链接切换至分拣 列表视图         点击 creae 按钮,建立一个新的分拣     part ...

  4. python 中的电子邮箱的操作

    通过python 的代码实现对email的操作,包括发送邮件和读取邮件. import poplib import smtplib from email.header import decode_he ...

  5. 【每日Scrum】第五天（4.15） TD学生助手Sprint1站立会议

    TD学生助手Sprint1站立会议(4.15) 任务看板 站立会议内容 组员 昨天 今天 困难 签到 刘铸辉 (组长) 今天和静姐,娇哥把图片3D画廊效果的功能实现了,GPS功能没什么进展,所以只能继 ...

  6. 自己动手写CPU之第七阶段（5）——流水线暂停机制的设计与实现

    将陆续上传本人写的新书<自己动手写CPU>,今天是第28篇.我尽量每周四篇 China-pub的预售地址例如以下(有文件夹.内容简单介绍.前言): http://product.china ...

  7. 为公司做crm资产管理

    一.实现会议室预定 二.实现调查问卷 三.项目背景初始化分析 四.简单的登陆注册 五.学生管理 六.老师管理 七.销售管理 八.客户关系管理 九.抢单管理 十.微信发消息发邮件管理 补充:数据表设计. ...

  8. LeetCode(83)题解: Remove Duplicates from Sorted List

    https://leetcode.com/problems/remove-duplicates-from-sorted-list/ 题目: Given a sorted linked list, de ...

  9. 页面滚动tab监听

    页面 需求,顶部固定,左侧固定,右侧内容滚动 所以给右侧内容高度,内容里面滚动(使用固定定位的话,右侧内容总会给head部分遮挡,比较坑) 1.左侧是侧边栏,点击li,右侧内容显示当前 右侧内容滚动, ...

  10. Create a /etc/yum.repos.d/mongodb-org-4.0.repo

    Install MongoDB Community Edition on Red Hat Enterprise or CentOS Linux — MongoDB Manual https://doc ...