这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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. 调用百度、高德地图App，百度地图网页版，App定位

    https://www.jianshu.com/p/296a3995adc2 https://blog.csdn.net/qq_26598821/article/details/51087785 ht ...

  2. ACM~排列组合&amp;&amp;hdu例子

    排列组合是数学中的一个分支.在计算机编程方面也有非常多的应用,主要有排列公式和组合公式.错排公式.母函数.Catalan Number(卡特兰数)等. 一.有关组合数学的公式 1.排列公式   P(n ...

  3. Setting a maximum attachment size

      By default IBM® Lotus® iNotes™ allows a maximum attachment size of 50,000K (50MB). You can increas ...

  4. 例子：使用Grunt创建一个Node.js类库

      创建一个文件夹. 打开命令行或者powershell, 运行npm init,根据提示填入package的信息. 在文件夹中创建index.js文件. /*! * mymongolib * Cop ...

  5. MySQL表级锁和行级锁

    一:概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking ...

  6. java语言特性之一

    package java.util.Collections; public static int indexOfSubList(List<?> source, List<?> ...

  7. C语言代码复习笔记：第二章

    输出星星 #include <stdio.h> void printStart( int num ) { ) { printf("*"); }; } int main( ...

  8. iOS 里RGB 配色 UIColor colorWithRed

    //比如rgb 色值为73. 148 .230 那么ios 里面要在后面加.0f 再除以255 [bline setBackgroundColor:[UIColor colorWithRed:73.0 ...

  9. PAT《数据结构学习与实验指导》实验项目集 2-09 2-10 2-11 2-12 2-13

    pat 2-09 装箱问题模拟 #include<cstdio> #include<set> #include<vector> using namespace st ...

  10. 带你走进EJB--将EJB发布为Webservice(2)

    在企业级的应用程序中经常都要把用不同语言写成的.在不同平台上运行的各种程序集成起来,而这种集成将花费很大的开发力量. 简单的一个例子:应用程序经常需要从运行在A主机上的程序中获取数据:或者把数据发送到 ...