这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. Java-JUC（九）：使用Lock替换synchronized，使用Condition的await,singal,singalall替换object的wait,notify,notifyall实现线程间的通信

    Condition: condition接口描述了可能会与锁有关的条件变量.这些用法上与使用object.wait访问隐式监视器类似,但提供了更强大的功能.需要特别指出的是,单个lock可能与多个Co ...

  2. 红米1线刷救砖教程V5版（移动联通适用，线刷包永久有效）

    红米1线刷救砖教程V5版(移动联通适用,线刷包永久有效) 原文来自:http://www.miui.com/thread-1890972-1-1.html?mobile=2 ,加了些自己的经验. (我 ...

  3. 浅谈压缩感知（十六）：感知矩阵之RIP

    在压缩感知中,总是看到"矩阵满足RIP"之类的字眼,没错,这是一个压缩感知绕不开的术语,有限等距性质(Restricted Isometry Property, RIP). 注意: ...

  4. （纪录片）鸟瞰中国 China from Above

    简介: 类型: 纪录片官方网站: natgeotv.com/uk/china-from-above制片国家/地区: 美国语言: 英语集数: 2单集片长: 44分钟IMDb链接: tt4872012 主 ...

  5. ecshop二次开发 使用ecshop电子商务系统的100个小问题

    自己从事B4C电子商务开发一段时间了,特别对ecshop深有体会,刚接触的时候不容易理解,下面将根据自己的经验,来总结100条关于操作ecshop电子商务系统的小问题. 1:如何修改网站"欢 ...

  6. 【Android界面实现】使用PagerTabStrip实现有滑动标签的Viewpager

    在ViewPager这样的能够滑动的控件上,总是有非常多的文章能够做.上次的文章,我们实现了一个自己定义的ViewPager的指示器,这篇文章,我们主要是想利用Android自带的控件,实现一个指示器 ...

  7. android中RecyclerView控件实现瀑布流布局

    本文是在之前文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml: <?xml version="1.0" en ...

  8. iOS 按钮拖动。

    -(void)testMove { moveBtn = [[UIButton alloc ]init]; moveBtn.frame = CGRectMake(0, 30, 60, 60); move ...

  9. WinForm 之 VS2010发布、打包安装程序

    第一步.在vs2010 打开要打包的应用程序解决方案,右键“ 解决方案 ” → “ 添加 ” → “ 新建项目 ” → “ 其他项目类型 ” → “ 安装和部署 ” → “ Visual Studio ...

  10. EFI/UEFI BIOS启动

    全局唯一标识分区表(GUID Partition Table,缩写:GPT)是一个实体硬盘的分区结构.它是可扩展固件接口标准的一部分,用来替代BIOS中的主开机纪录分区表.但因为MBR分区表不支持容量 ...