这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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 通过Web.config添加mimetype映射

    在Web.config里添加以下代码即可 <configuration> <system.webServer> <staticContent> <!-- re ...

  2. 解决PHP使用CVS导出Excel乱码问题

    在使用PHP生成CVS文件后通过Excel打开发现中文全部变成了乱码,之前在我本地win08通过WPS正常的,但上传到服务器Linux在服务器上测试出现了乱码 一开始以后是Linux的问题但后来测试时 ...

  3. SSAS知识回放之订单数据分析

    1:目标 基于已经做好的DW,利用SSAS实现一个多维数据模型的创建,通过浏览可以简单的实现订单数据的分析 2:步骤 2.1:添加数据源 如下图所示,创建一个数据仓库层的数据源连接 2.2:添加数据源 ...

  4. Android 多语言支持

    本文内容 字符串本地化原理 环境 创建项目 测试其他语言 Android 本地化语言 ISO 编码 参考资料 使用 Android 的人越来越多,每天都在增加.因此,当你想把你的应用成功地全球化时,通 ...

  5. dynamic(2) – ExpandoObject的使用

    一,ExpandoObject使用场合 在传递对象,但是又不想创建一个class或者struct的时候,ExpandoObject就是一个非常好的选择. 假如我们有一个SendMail的函数,功能是发 ...

  6. javascript学习网址

    教程:JavaScript征途 http://www1.huachu.com.cn/read/readbook.asp?bookid=10109449 教程:JScript 参考 http://msd ...

  7. Linux多线程同步之相互排斥量和条件变量

    1. 什么是相互排斥量 相互排斥量从本质上说是一把锁,在訪问共享资源前对相互排斥量进行加锁,在訪问完毕后释放相互排斥量上的锁. 对相互排斥量进行加锁以后,不论什么其它试图再次对相互排斥量加锁的线程将会 ...

  8. Aerospike系列：6：AerospikeTools & Utilities

    1:Aerospike Query Language类似于SQL命令.可以用来管理索引和用户自定义函数,也可以测试大多数数据库的功能. [root@localhost ~]#aql OPTIONS - ...

  9. CSS拾遗

    1:CSS样式的声明 选择符{ 属性:值; 属性:值; ... } 其中,选择符有: 标签选择器:标签名{样式} 类选择器: .类名{样式} ID选择器:  #ID名{样式} 另外:样式属性的书写格式 ...

  10. picasso 在魅族手机无法加载缩略图的bug

    09-03 12:46:30.722 19088-19088/com.tongyan.subway.maintenance W/PerfScheduler: Cann't find the ListV ...