做一些后台项目,和一下带侧边栏项目的时候登高布局很常用,总结了下有几种

1.margin-bottom方法

这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的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> 后续再慢慢总结比较实用的几种 参考:http://www.w3cplus.com/css/creaet-equal-height-columns
   http://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width

CSS等高布局的更多相关文章

  1. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  2. CSS等高布局的7种方式

    前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高.本文将介绍边框模拟.负margin这两种伪等高以及tabl ...

  3. css 等高布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [css]等高列的简单实现

    又碰到css等高布局的问题,发现以前没有总结,这里再把基本原理写一下吧. 1.负边距控制法. <div id="content"> <div class=&quo ...

  5. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  6. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  7. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

  8. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  9. 关于css解决俩边等高的问题(等高布局)

    等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...

随机推荐

  1. linux桌面环境gnome,kde,xfce,lxde 使用比较(转)

    Linus Torvalds大神前几日在 Google+上表示,GNOME 3"无可容忍的凌乱",改投Xfce桌面环境.下面就GNOME, KDE, XFCE和 LXDE略作比较. ...

  2. Odoo下拉动作列表

  3. 【Mysql】权限管理

    mysql权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 1.先从user表中的Host, ...

  4. heartbeat安装与配置

    Hearbeat和keepalived区别 Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP): He ...

  5. Mysql --分区表(2)

    分区类型 RANGE分区 range分区的表是利用取值范围将数据分成分区,区间要连续并且不能互相重叠,使用values less than操作符进行分区定义 LIST分区 LIST分区是建立离散的值列 ...

  6. IMP数据到指定的表空间

    IMP数据到指定的表空间 当我们通过imp导入dmp文件时,默认的情况下,数据会导入到exp出的dmp文件所对应的表空间里面. 比如:通过orcl_dev用户,exp数据,用orcl_test用户im ...

  7. 从一个Fragment跳转到另一个Fragment

    我们知道Activity之间的跳转可以使用 startActivity(intent).但Fragment之间的跳转却不能使用该方法,那该怎么办呢? 直接上代码: 核心代码 @Override//核心 ...

  8. 5.18-5.22js调制样式

    这次主要是通过改变列表的浮动值来实现点击跳动效果,因为是点击列表的的每一个li都可跳动整个列表,所以是双for循环,第一个是控制点击事件,第二个是循环改变每个li的flot值.另外要改变每次点击后的点 ...

  9. Programming Assignment 2: Randomized Queues and Deques

    实现一个泛型的双端队列和随机化队列,用数组和链表的方式实现基本数据结构,主要介绍了泛型和迭代器. Dequeue. 实现一个双端队列,它是栈和队列的升级版,支持首尾两端的插入和删除.Deque的API ...

  10. [ASE][Daily Scrum]11.21

    由于服务器广播那边进度稍慢,所以这几天client和view那边先来做无限地图这部分, View Shilin Liu 不同地图块无缝拼接  当tank走到地图块边缘时从服务器请求新的地图块     ...