这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. 解析oui.txt文件，通过MAC前缀获取Organization

    1.前言 OUI是指Organizationally unique identifier  (组织唯一标识符),签发给各类组织的唯一标识符.MAC地址共有6个字节48位组成,前3个字节体现了OUI,其 ...

  2. express next function

    nodejs 里面的next()这个函数调用的作用是什么呢? var express = require('express'); var app = express(); var myLogger = ...

  3. GIT 使用cherry-pick 重演其他分支的提交

    在使用Git时是否会遇到这样的问题: 你正在使用Git进行版本控制,某天你接着昨天的工作了提交了N个提交,结果在合并远程分支的时候才发现原来你在工作之前没有注意到你要提交的分支状态 结果导致你本来要提 ...

  4. junit与spring-data-redis 版本对应成功的

    spring-data-redis  版本:1.7.2.RELEASE junit 版本:4.12

  5. 使用 HTML5, javascript, webrtc, websockets, Jetty 和 OpenCV 实现基于 Web 的人脸识别

    这是一篇国外的文章,介绍如何通过 WebRTC.OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上. 实现的效果包括: 还能识别眼睛 人脸识别的核心 ...

  6. ArcGIS读取dem格式数据

    DEM是GIS常用的一种数据,用来做各种分析.展示等,十分有用!它实质上就是一个栅格,只不过这个栅格值表示高程,常用的格式是tif,grid等.今天听到了另外一种说法:*.dem是最常见到的DEM的格 ...

  7. C# 动态解析表达式

    需求 我们很难捉摸用户的思维,即使使用非常正式的文档规范某些数据的定义.结果的标准等,也不能抵挡住用户不断变化的需求,但他们有个万变不离的东西——你做这个东西要是万能的,即输入参数类型.个数等发生改变 ...

  8. android中XRecyclerView控件的使用

    控件的地址:https://github.com/XRecyclerView/XRecyclerView XRecyclerView控件是一个加强版的RecyclerView,可以很方便的实现下拉刷新 ...

  9. scoop - 初次使用

    scoop也是包管理工具,不过是含着金钥匙出生的(正巧碰上微软支持开源,并且拥抱开源生态圈),此后的Win10 powershell 3.x+也就不会像Win7 powershell 2.x那样沉默了 ...

  10. VMware vSphere 5.1 群集深入解析（一）

    http://virtualbox.blog.51cto.com/531002/1168293 VMware vSphere 5.1 Clustering Deepdive HA.DRS.Storag ...