这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下（数值不固定）：

　　margin-bottom:-3000px; padding-bottom:3000px;

　　再配合父标签的overflow:hidden 属性即可实现高度自动相等的效果。

　　举个简单的实例吧，如下CSS及HTML代码：

　　#content{overflow:hidden;} .left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;} .right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;} .center{margin:0 410px 0 210px; background:#ffe6b8; height:600px;}

　　<div id="content"> <div class="left">左边，无高度属性，自适应于最高一栏的高度</div> <div class="right">右边，无高度属性，自适应于最高一栏的高度</div> <div class="center">中间，高度600像素，左右两栏的高度与之自适应</div> </div>

纯CSS兑现侧边栏/分栏高度自动相等(转)的更多相关文章

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. css 分栏高度自动相等

    方法2: <div class="ticket_table"> <div class="ticket_l"> <h3>全票& ...

  3. css笔记 - column分栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  5. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

  6. 纯css实现宽度自适应，高度与宽度成比例

    html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...

  7. 淘宝分类导航条；纯css实现固定导航栏

    效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. CSS3-column分栏

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

随机推荐

  1. 向windows添加环境变量

    以NASM为例,软件安装完毕后,启动Windows操作系统的命令窗口,在安装目录(比如C:\Program Files\NASM)下运行nasm是ok的,但是在其他任意目录下运行nasm就会报错. 这 ...

  2. Linux反编译

    转自:http://bbs.pediy.com/showthread.php?threadid=11315 一个简单的linux crackme的逆向前言    最不喜欢的就是写破解教程,酒后一时冲动 ...

  3. IDEA注册码和license服务器附使用方法

    以下两种方式均可激活intellij Idea 15和16版本 最上方点击,Help->Registet 1.注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTc ...

  4. JavaScript 判断一个对象{}是否为空对象的简单方法

    第一种: function isEmptyObject(obj) { for (var key in obj) { //返回false,不为空对象 return false; } return tru ...

  5. Sublime Text 3 配置 PHPCS 插件

    Download php code sniffer addon via Package Control in ST3. Download The php-cs-fixer File From This ...

  6. .Net 泛型约束

    本文内容 使用泛型约束的原因 未绑定的类型参数 作为约束的类型参数 参考资料 当"设计模式"出现时,人们提"用接口编程":后来,有了泛型,人们提"用泛 ...

  7. JMX入门开发

    什么是JMX?或者是JMX是做什么的?我的理解是:可以远程管理/编辑JAVA对象.如图: 上面的SchemaName属性就是可以动态修改的,那么是如何做到的哪?下面咱们逐步分析. 一.首先假设咱们有个 ...

  8. C# •MouseDown •MouseDown •MouseUp 的先后顺序

    鼠标按下事件发生的顺序 MouseDown event. Click event. MouseDownevent. MouseUp event. 可以写个测试,放一个picture控件 private ...

  9. nano在CentOS上的安装和使用

    安装: yum -y install nano 打开新建:nano 路径+文件名 查看用:cat path/filename如果改文件存在,上面的命令将打开这个文件:如果文件不存在则将会创建一个新文件 ...

  10. 多表连接的三种方式详解 hash join、merge join、 nested loop

    在多表联合查询的时候,如果我们查看它的执行计划,就会发现里面有多表之间的连接方式.多表之间的连接有三种方式:Nested Loops,Hash Join 和 Sort Merge Join.具体适用哪 ...