css奇技淫巧之—多列等高
什么是等高布局?
先来看一个案例:
上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的。我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了,左边高度增加,右边也跟着增加,右边高度增加,左边同样也要增加,否则就会出现“断层”的效果。在这里,等高布局是为了维护边框线条的完整性,在有些地方则可能是为了维护背景的完整性,达到整体一致不缺失的效果。
布局方案
等高布局有几种不同的方法,但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的,而且边框也是跟随padding变化的,所以就成功的完成了一个障眼法。
代码
先来看下没有等高布局的情况
效果:
然后我们应用等高布局:
效果如下:
在进行具体操作的时候,padding-bottom的值大小取决于你的项目的实际情况,如果不确定,设大一点也无所谓。
最终的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right<br><br><br>现在我的高度比left高,但left用它的padding-bottom补偿了这部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>
转自:http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html
css奇技淫巧之—多列等高的更多相关文章
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- 三列等高 css实现
实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden; 关键点就是三列div 同时margin-botto ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- CSS 3列等高
方法1: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- 多种方法实现div两列等高(收集整理)
HTML骨架 <div id="header">头部</div> <div id ="container"> <div ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
随机推荐
- Linux Shell 判断块设备节点是否存在
/************************************************************************* * Linux Shell 判断块设备节点是否存在 ...
- freeMarker(六)——程序开发指南入门
学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.创建Configuration实例 首先,你应该创建一个 free ...
- FFmpeg内存操作(三)内存转码器
相关博客列表 : FFMPEG内存操作(一) avio_reading.c 回调读取数据到内存解析 FFMPEG内存操作(二)从内存中读取数及数据格式的转换 FFmpeg内存操作(三)内存转码器 本文 ...
- 优秀开源项目之二:流媒体直播系统Open Broadcaster Software
Open Broadcaster Software(OBS)是一款用于音视频录制和直播的免费开源软件.可以轻松部署到多种平台,目前支持Windows.MAC和Linux. 特性: 1.高性能的实时视频 ...
- JAVA 1.5 并发之 Executor框架 (内容为转载)
本文内容转自 http://www.iteye.com/topic/366591 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Exec ...
- IDEA常用快捷键整理
快速定位文件: Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Alt+Shift+C,最近打开的文件 Ctrl+N,快速打开类 Ctrl+Shift+N,快速打开文件 当 ...
- 对spring、AOP、IOP的理解 (转)
spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦2.可以使用容易提供的众多服务,如事务管理,消息服务等3.容器提供单例模式支持4.容器提供了AOP技术,利用它很容易实现如权 ...
- BackgroundWorker 控件
BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作.耗时的操作(如下载和数据库事务)在长时间运行时可能会导致用户界面 (UI) 始终处于停 ...
- stm32之内部功能
本文将提到以下内容: 位带操作 中断 printf重定向 随机数发生器RNG AD/DA DMA 高性能计算能力 加密 ART加速 一.位带操作 在学习51单片机的时候就使用过位操作,通过关键字sbi ...
- !important定义为最高级不可替代
<!DOCTYPE html> /*!important定义为最高级不可替代*/ <html lang="en"> <head> <met ...