css实现类似heigth:100%的方法
1. 效果
2. 代码
2.1. Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet/less" type="text/css" href="test.less"/>
<script src="lib/less-1.7.1.min.js" type="text/javascript"></script> </head>
<body>
<div class="row-01"></div>
<div class="row-02">
<div class="cell-left"></div>
<div class="cell-right">
.cell-right这个div，没有设置height，但是，达到了一种类似height:100%的效果！
</div>
</div>
</body>
</html>
2.2. Less
body {
margin:;
}
@height-row-01: 300px;
@width-row-02-cell-left: 100px;
@height-row-02-cell-left: 200px;
.row-01 {
background: #f1c40f;
height: @height-row-01;
}
.row-02 {
> div {
display: inline-block;
vertical-align: top;
}
.cell-left {
background: #c1b0bb;
width: @width-row-02-cell-left;
height: @height-row-02-cell-left;
}
.cell-right {
background: #a0d8ff;
}
}
//核心代码
.row-02 {
.cell-right {
position: absolute;
top: @height-row-01;
bottom:;
left: @width-row-02-cell-left;
right:;
}
}
css实现类似heigth:100%的方法的更多相关文章
- Web 性能优化：21 种优化 CSS 和加快网站速度的方法
这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...
- 顽石系列：CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- [转]-CSS 元素垂直居中的6种方法
原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...
- 提高CSS文件可维护性的五种方法
当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...
- 【转】CSS Sprites教程大全（使用方法、工具介绍）
什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- MYSQL中可以实现类似IF判断的方法
MYSQL中可以实现类似IF判断的方法 新建一张客户表,如下:sex:1-男,2-女,3-未知:level是客户的级别:1-超级VIP客户,2-VIP客户,3-普通客户 方式一:case函数:流程控制 ...
随机推荐
- 连接linux
mac下连接linux 1 iTerm2 方式一: 在iTerm2的命令行下,输入: //-p端口号(linux默认是22),用户名@linux的IPssh -p 22 username@ip//按e ...
- DataOutput接口实现类有：
FSDataOutputStream final FSDataOutputStream create = fs.create(path);
- RK3288 增加双屏异显 eDP+LVDS
CPU:RK3288 系统:Android 5.1 下面是官方文档中的信息. 1.rk3288 支持的显示接口可以任意组合. 2.双屏异显时,一个显示接口当主屏,另一个当副屏:主副屏由板级 dts 文 ...
- python中高阶函数学习笔记
什么是高阶函数 变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数 def fun(x, y, f): print f(x), f(y) fun ...
- FPGA的CNN加速，你怎么看？
网上对于FPGACNN加速的研究已经很多了,神经网络的硬件加速似乎已经满大街都是了,这里我们暂且不讨论谁做的好谁做的不好,我们只是根据许许多多的经验来总结一下实现硬件加速,需要哪些知识,考虑哪些因素. ...
- 历届试题 Excel地址
问题描述 Excel单元格的地址表示很有趣,它使用字母来表示列号. 比如, A表示第1列, B表示第2列, Z表示第26列, AA表示第27列, AB表示第28列, BA表示第53列, .... 当然 ...
- 20165226 MySort的实现
MySort的实现 一.实验要求 研究sort的其他功能,要能改的动代码,模拟实现Linux下Sort -t : -k 2的功能. 二.代码 /** * Created by xiang on 201 ...
- 学生选课数据库SQL语句练习题
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
- PAT 甲级1003 Emergency (25)（25 分）(Dikjstra，也可以自己到自己！)
As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...
- small_vector
folly/small_vector.h folly::small_vector<T,Int=1,...> is a sequence container that implements ...