页面布局时,有时候需要两个div充满父div空间,设定一个div尺寸后,可以使用css计算高度设置另一个尺寸:

<style>
.wrap{
width:1000px;
}
.left{
width:200px;
}
.right{
/*计算函数 calc()*/
width:calc(100%-200px);
}
</style>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>

使用sass预编译css,可以参考如下代码


  .table{
      // 计算高度
      height: calc(100% - #{$--operation-height});
  }

sass计算高度的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  5. SASS教程sass超详细教程

    SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...

  6. Sass之坑Compass编译报错

    前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...

  7. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  8. Sass用法指南

    写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...

  9. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

随机推荐

  1. java代码开启关闭线程(nginx)

    源码: import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; pub ...

  2. hdu1698 区间更新

    初写线段树的时候,印象最深的一道,有一个pushdown的操作,使我的tle变成了ac 题意 输入t,然后t组数据 输入n,m,n代表n个点上价值全是1的绳子,m代表m次操作 m行l,r,val  就 ...

  3. stm32 串口发送字符串丢失第一个字节

    使用stm32f103调试串口通讯时,上电后发送的字符串的第一个字节丢失. 发送数据GpuSend("SPG(2);"); 接收端收到的数据为:PG(2);,第一个字符丢失. 出现 ...

  4. Python之字符

    关于字符的常用操作:(字符为不可变长度的类型,故不能“增”.“删”等改变长度的操作) 1.改:改变字符串中的某个值.但为浅改变: name = "Python3.5" print( ...

  5. 从数组A中删除在数组B中存在的元素,用C语言实现

    从数组A中删除在数组B中存在的元素,用C语言实现 考验数组操作的能力,C语言的熟练程度. //功能:从数组A中删除在数组B中也存在的数据 //输入:arrA --- 数组A // lenA --- 数 ...

  6. 使用SQL语句还原数据库 2012.3.20

    --返回由备份集内包含的数据库和日志文件列表组成的结果集. --主要获得逻辑文件名 USE master RESTORE FILELISTONLY FROM DISK = 'g:\back.Bak' ...

  7. git 从创建到推送到远程,到拉取,实操

    https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424 初始化 git init 添加所有文件到暂存区 git add . c ...

  8. [转]:Ubuntu 下Apache安装和配置

    [转]:Ubuntu 下Apache安装和配置_服务器应用_Linux公社-Linux系统门户网站  https://www.linuxidc.com/Linux/2013-06/85827.htm ...

  9. python学习 第一章(说不定会有第零章呢)one day

    ------------恢复内容开始------------ 一.啥是python python是吉尔·范罗苏姆于1989年开发的一个新的脚本解释程序,是ABC语言的一种继承. 二.python的特点 ...

  10. STM32 的系统滴答定时器( Systick) 彻底研究解读

    作者:王健 前言 SysTick 比起那些 TIM 定时器可以说简单多啦~~~~~哥的心情也好了不少, 嘎嘎!! ARM Cortex-M3 内核的处理器内部包含了一个 SysTick 定时器,它是一 ...