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函数:流程控制 ...
随机推荐
- 如何在aspx.cs 里面获取html 控件值
aspx 页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...
- 使用distillery 构建专业的 phoenix 项目软件包
备注: 首先需要安装 elixir 环境 1. 基本项目说明 参考项目: https://github.com/rongfengliang/phoenix-rest-demo 2. 项目说 ...
- 虚拟主机wordpress文件上传大小限制更改
默认的wp文件上传的大小都是2M 登录阿里云进入控制面板找到你的虚拟机实例 点击管理 改成10M,最大也就是10,虚拟机的睾丸之处.保存,去页面新媒体添加可以看到最大限制为10M了
- numpy中文件的存储和读取-嵩天老师笔记
numpy中csv文件的存储和读取 CSV文件:(Comma‐Separated Value, 逗号分隔值) 一维和二维数组 存储 np.savetxt(frame,array,fmt='%.18e' ...
- Maven使用中的常见问题整理
1.更新eclipse的classpath加入新依赖 1.在dependencyManagement里面加入包括版本在内的依赖信息,如: <dependency> <groupId ...
- 使用Octave分析GNU Radio的数据
Octave 是 GNU Radio 的最流行的分析工具,因此 GNU Radio 软件包也包含它自身的一组脚本用于读取和语法分析输出.本文介绍如何使用 Octave 分析 GNU Radio 产生的 ...
- JVM内存管理之GC简介
为何要了解GC策略与原理? 原因在上一章其实已经有所触及,就是因为在平时的工作和研究当中,不可避免的会遇到内存溢出与内存泄露的问题.如果对GC策略与原理不了解的情况下碰到了前面所说的问题 ...
- 全局获取Context
1.定制一个Application类,管理全局的状态信息 public class MyApplication extends Application{ private static Context ...
- cordova 安装使用
前人总结: Cordova是Apache软件基金会的一个产品.其前身是PhoneGap,由Nitobi开发,2011年10月,Adobe收够了Nitobi,并且PhoneGap项目也被贡献给Apach ...
- 性能监控之Spotlight
有和同事探讨一些技术监控类软件,谈到Spotlight,临时记一下. 下载地址https://pan.baidu.com/s/1HB9xd9LmOR-MOk8FIGBm-A 常规安装模式,下载解压安装 ...