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函数:流程控制 ...
随机推荐
- win7 QT +opencv环境搭建
1.Win7 Qt4.8.5+QtCreator2.8.0+mingw环境参考前博文先搭建 2.下载Cmake2.8.11.2版本,安装.运行 [项目]那编译器选择:MinGW4.4.另外,重新编译O ...
- licode从客户端到连上信令服务器流程
var config = {audio: true, video: true, data: true, screen: screen, videoSize: [640, 480, 640, 480], ...
- golang回调函数的例子
package main import "fmt" type TestStruct struct { } func (object *TestStruct) test(msg st ...
- Ubuntu12.10下Python（cx_Oracle）访问Oracle解决方案
第一步:下载安装cx_Oracle 下载地址:http://sourceforge.net/projects/cx-oracle/files/5.1.2/,下载cx_Oracle的rmp安装文件,注意 ...
- PyQt 5控件
PyQt 5控件包括:按钮.复选框.滑动条.列表框等 复选框QCheckBox QCheckBox复选框控件,它有两个状态:打开和关闭,他是一个带有文本标签(Label)的控件.复选框常用于表示程序中 ...
- MongoDB day04
文件存储 文件存储到数据库的方式 1. 存储路径 将文件在本地的路径以字符串形式存储到数据库 优点 : 节省数据库空间 缺点 : 当数据库或者文件位置发生变化时文件丢失. 2. 存储文件本身 以二进制 ...
- MySQL 概念
MySQL 数据库:数据库是一个存储数据的仓库, 用在哪些领域:金融机构.游戏网站.购物网站.论坛网站 提供数据服务的软件 1.软件分类:MySQL.SQL_Server.Oracle.Mariadb ...
- 【洛谷】P1388 算式（dp）
题目描述 给出N个数字,不改变它们的相对位置,在中间加入K个乘号和N-K-1个加号,(括号随便加)使最终结果尽量大.因为乘号和加号一共就是N-1个了,所以恰好每两个相邻数字之间都有一个符号.例如: N ...
- kafka常用命令（cdh5.10.0+kafka）
参考资料:http://kafka.apache.org/quickstart 进入kafka安装目录(CDH安装路径为:/opt/cloudera/parcels/KAFKA):进入bin目录: c ...
- DOM库及常用方法封装
节点 nodeType nodeName nodeValue 元素节点 1 大写的标签名 null 文本节点 3 #text 文本内容 注释节点 8 #comment 注释内容 document 9 ...