页面布局时,有时候需要两个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 Https双向验证

    CA: Certificate Authority,证书颁发机构 CA证书:证书颁发机构颁发的数字证书 参考资料 CA证书和TLS介绍 HTTPS原理和CA证书申请(满满的干货) 单向 / 双向认证 ...

  2. js 匀速运动到100和到300

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【剑指Offer面试编程题】题目1509:树中两个结点的最低公共祖先--九度OJ

    题目描述: 给定一棵树,同时给出树中的两个结点,求它们的最低公共祖先. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入的第一行为一个数n(0<n<1000),代表测试样例的个数 ...

  4. 高级T-SQL进阶系列 (一)【中篇】:使用 CROSS JOIN 介绍高级T-SQL

    [译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文连接:传送门. 当一个CROSS JOIN 表现得如同一个INNER JOIN 在上一章节我提到当你使用一个CROSS JOIN ...

  5. 获取Linux系统运行情况信息

    代码: #include <stdio.h> #include <unistd.h> /* usleep() */ #include <stdlib.h> #inc ...

  6. python学习 —— 获取系统运行情况信息并在Linux下设置定时运行python脚本

    代码: # -*- coding:utf-8 -*- from psutil import * def cpu_usage_rate(): for i, j in zip(range(1, cpu_c ...

  7. Spring中@MapperScan注解

    之前是,直接在Mapper类上面添加注解@Mapper,这种方式要求每一个mapper类都需要添加此注解,麻烦. 通过使用@MapperScan可以指定要扫描的Mapper类的包的路径,比如: @Sp ...

  8. centos 下安装nginx

    安装make: yum -y install gcc automake autoconf libtool make 安装g++: yum install gcc gcc-c++ cd /usr/loc ...

  9. Docker 之registry私有仓库搭建

    Docker 之registry私有仓库搭建 官方提供的私有仓库docker registry用法 https://yeasy.gitbooks.io/docker_practice/reposito ...

  10. 关于java自学的内容以及感受

    这周主要学习了关于数组方面的知识包括一维数组以及多维数组(他们所储存数据默认值为0),以下为我根据相关知识编写的简单程序: public class test { public static void ...