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函数:流程控制 ...
随机推荐
- 使用 commander && inquirer 构建专业的node cli
备注: 比较简单就是使用nodejs 的两个类库帮助我们进行开发而已,具体的使用参考类库文档 1. 项目初始化 a. 安装依赖 yarn init -y yarn add commander in ...
- webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead
webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instea ...
- wordpress上传文件，插件无法建立目录（根本原因解决）
刚建立的wp网站经常遇到上传图片或者下载插件“无法建立目录”的问题,肯定是权限的问题,网上大部分解决方案都是把uploads或者 plugins权限手动改成777, 有一部分人成功了,有一部分没成功, ...
- Time complexity--codility
lesson 3: Time complexity exercise: Problem: You are given an integer n. Count the total of 1+2+...+ ...
- 14.Python使用Pillow教程
1.打算开始学习PIL,在命令行输入:pip3 install PIL,报错信息如下所示,后百度了下,发现:PIL仅支持到Python2.7,后来一群志愿者在此基础上创建了兼容性版本,为Pillow, ...
- easyui datagrid 基础方法和事件
数据表格属性(DataGrid Properties) 属性继承控制面板,以下是数据表格独有的属性. 名称 类型 描述 默认值 columns array 数据表格列配置对象,查看列属性以获取更多细节 ...
- CMapStringToPtr添加与释放
// 创建MapStringToPtr CMapStringToPtr m_prjFiles; CStringList m_fileList; m_fileList.AddTail(_T(" ...
- 最近遇到的几个纯C编程的陷阱
首先是一个不容易看出来的语法上的陷阱 经过调试得出的错误是对非socket的socket操作出错,sockfd在调试过程中发现是0,不是一个合理的文件描述符. 仔细一看原来是括号忘记加了,该运算是先用 ...
- mysql 查看并修改默认端口号
1. 登录mysql [root@test /]# mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands en ...
- HDU 2669 Romantic（裸的拓展欧几里得）
Romantic Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...