这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. 阿里云centos安装ftp与svn过程

    1.下载xshell或者secureCRT 2.登录centos或者服务器 3.安装vsftpd [root@xxx]# yum install vsftpd //安装vsftpd [root@xxx ...

  2. js 前加分号和感叹号的含义

    ;!function(){}();  ;!有什么用? 从语法上来开.Javascript中分号表示语句结束,在开头加上.可能是为了压缩的时候和别的方法切割一下,表示一个新的语句開始.所以,假设在一个单 ...

  3. IIS 7启用static JSON文件能POST方法

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  4. logistic回归具体解释(二）：损失函数（cost function）具体解释

    有监督学习 机器学习分为有监督学习,无监督学习,半监督学习.强化学习.对于逻辑回归来说,就是一种典型的有监督学习. 既然是有监督学习,训练集自然能够用例如以下方式表述: {(x1,y1),(x2,y2 ...

  5. C#.NET常见问题(FAQ)-如何把文本复制粘贴到文本框的光标位置

    前面已经通过Clipborad.SetText之后,这里就要先把目标文本框的文本改成插入之后的值,然后修改光标所在位置  

  6. SWIFT学习笔记05

    1.Swift 无需写break,所以不会发生这样的贯穿(fallthrough)的情况.2.//用不到变量名,可用"_"替换 for _ in 1...power { answe ...

  7. Linux下设置进程使用指定核的CPU

    一.原因: 我们不能任由操作系统负载均衡,因为我们自己更了解自己的程序,所以,我们可以手动地为其分配CPU核,而不会过多地占用CPU0,或是让我们关键进程和一堆别的进程挤在一起. 二.查看方法: 1. ...

  8. Linux中使用pwconv实现passwd中密码到shadow

    1.功能说明:开启用户的投影密码. 2.语 法:pwconv 3.个人理解:就是将/etc/passwd里的密码用x代替,并将真实密码(当然是加密后的)转移到/etc/shadow里面. 4.补充说明 ...

  9. 001-Go JSON处理

    在golang中提供的encoding/json包可以编码JSON以及解码JSON数据. 1.编码JSON 使用json包中的Marshal函数进行编码,源码如下: func Marshal(v in ...

  10. JavaScript的valueOf和toString

    深度好文 http://www.cnblogs.com/coco1s/p/6509141.html 知识要点 不同对象调用valueOf和toString的顺序不一样 高阶函数的使用,替代for循环 ...