这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. Ubuntu14设置静态IP的地方

    sudo vim /etc/network/interfaces 修改如下部分: auto eth0iface eth0 inet staticaddress 192.168.0.117gateway ...

  2. 解决Ubuntu/debian的Apt-get 由于依赖关系安装失败的问题

    The following packages have unmet dependencies: libssl-dev: Depends: libssl0.9.8 (= 0.9.8k-7ubuntu8) ...

  3. 如何获取当前应用程序所用的OpenGL ES的版本

      如何获取当前应用程序所用的OpenGL ES的版本? [答案]     char* glVersion = (char*)glGetString(GL_VERSION);     LOGW(&qu ...

  4. python抓取数据，python使用socks代理抓取数据

    在python中,正常的抓取数据直接使用urllib2 这个模块: import urllib2 url = 'http://fanyi.baidu.com/' stream = urllib2.ur ...

  5. 【树莓派】在树莓派的Android系统中安装APK应用

    树莓派3 Android TV安装APK应用教程 本文摘自:http://www.mz6.net/news/android/6867.html 树莓派3 Android TV怎样安装软件?对于熟悉AD ...

  6. JAVA eclipse 安装lombok

    1.下载lombok http://projectlombok.org/download.html 2.点击安装: 如果eclipse没有安装到默认目录,那么需要点击Specify选择eclipse的 ...

  7. Sqoop拒绝连接错误

    使用Sqoop远程连接MySQL导入数据到HBase数据库: sqoop import --driver com.mysql.jdbc.Driver --connect "jdbc:mysq ...

  8. Nginx源代码分析—业务流程

    Nginx源代码分析-业务流程 到此为止,我们如果ngx_init_cycle已经结束.我们临时无论他做了什么,我们从他做的效果进入. 从常理上来讲,假设一个请求到达,那么我们须要接受这个请求,那么就 ...

  9. JS密码校验规则前台验证(不能连续字符（如123、abc）连续3位或3位以上)(不能相同字符（如111、aaa）连续3位或3位以上)

    密码必须为8到16位且必须包含数字和字母 密码必须包含特殊字符[_&#%] 不能连续字符(如123.abc)连续3位或3位以上 不能相同字符(如111.aaa)连续3位或3位以上 /** * ...

  10. Java DES 加解密（"DES/ECB/PKCS1Padding"）

    private static final Cipher DES_CIPHER; static { try { DES_CIPHER = Cipher.getInstance("DES/ECB ...