这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. 在Excel中输入超过10的带圈数字

    通过改变字体,可以在excel中输入1-20的带圈数字.对于某些人这些还不够用,那怎么办呢? 有了下面这个不知道是哪个大神做的字体,你就可以直接输到100啦 将字体文件文件粘贴至“C:\WINDOWS ...

  2. 关于Promise的一些个人理解jQuery的deferred

      一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组), ...

  3. 【mybatis】多次查询缓存的问题

    转自:http://cheng-xinwei.iteye.com/blog/2021700?utm_source=tuicool&utm_medium=referral 最近在使用mybati ...

  4. Oracle使用技巧及PL/SQL Developer配置

    Oracle使用技巧及PL/SQL Developer配置 摘自:http://livenzhao.spaces.live.com/blog/cns!6E368BE9F6DDD872!595.entr ...

  5. struts笔记

    Struts视频笔记: Struts是一个开源的web框架,框架提高了程序的规范的同时也约束了程序员的自由 为什么会有struts: 因为我们队mvc理解的不同,可能造成不同公司写程序的时候,规范不统 ...

  6. iOS 设置 UIWebView UserAgent

    NSString *userAgent = [[[UIWebView alloc] init] stringByEvaluatingJavaScriptFromString:@"naviga ...

  7. 微信小程序 - cb回调（typeof cb == "function" && cb(obj);）

    typeof cb == "function" && cb(obj) 但凡用了Promise,这种方式就可以抛弃了. Page({ data: {}, onLoad ...

  8. Android Webservices 返回多行多列数据(Dataset)

    对于之前从事.net或者java开发人员,习惯了从后台获取网格数据(多行多列DataTable),但转行从事android开发,难免会不习惯 Android调用Webservice时,如果返回值是一个 ...

  9. Endorsement 业务逻辑介绍

    本文主要介绍保单系统中Endorsement功能的基本逻辑和过程,主要参考OIC系统 保单系统 保险公司用来管理保单的信息系统,这里简称为保单系统.主要作用是收集和维护投保人信息和投保信息,计算保费, ...

  10. 算法笔记_216:第六届蓝桥杯软件类校赛部分真题(Java语言C组)

    目录 1 题目一 2 题目二 3 题目三 4 题目四 5 题目五 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 题目一 二项式的系数规律,我国数学家很早就发现了. 如[图1.png],我国南宋数学 ...