1. 负margin:
 
margin-bottom:-3000px; padding-bottom:3000px;

再配合父标签的overflow:hidden属性即可实现高度自动相等的效果。

 
2. display: table-cell

display:table-cell;
*display:inline-block; *width:auto;
width:2000px;
或者使用:
display:table-cell;
width:2000px;
*width:auto; *zoom:1;

3. 绝对定位

实现等高效果的核心CSS代码如下:

.equal_height{
  width:100%; height:999em;
  position:absolute; left:; top:;
}

同时,满足以下一些条件:

  1. 高度999em的绝对定位层位于侧栏容器内,侧栏positionrelative
  2. 该栏实际元素内容用一个与absolute绝对定位层为兄弟关系的标签层包裹,positionrelativez-index1或其他
  3. 左右栏的父标签需设置overflow:hidden,同时为了兼容IE6/7,需设置positionrelative
 
原理很简单:由于绝对定位元素无高度的特性无宽度的特性,我们可以伪造一个高度足够高的绝对定位层(设置背景色,边框等属性),同时设置父标签溢出隐藏,那么其多出来的高度酒不会显示了,也就实现了看上去的等高布局效果了。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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

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

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

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

  3. CSS等高布局

    做一些后台项目,和一下带侧边栏项目的时候登高布局很常用,总结了下有几种 1.margin-bottom方法 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): ...

  4. css 等高布局

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

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

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

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

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

  7. css设置多列等高布局

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

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

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

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

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

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

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

随机推荐

  1. 将优狐智能插座接入 Domoticz

    前言 前几天在某淘宝优惠中看到一个 WiFi 智能插座卖 29 块包邮,心想要是里面是 ESP8266 模块说不定可以刷上固件玩玩,就买了俩回来,记下折腾过程. 拆解 WiFi 智能插座的淘宝介绍页 ...

  2. JavaScript Succinctly 读后笔记

    1.JavaScript does not have block scope  2.Scope is determined during function definintion,  not invo ...

  3. javascript的最重要的特性之一:闭包的解决方案

    初始代码: for (var j = 0; j < lnglats.length; j++) { AMap.event.addListener(markers[j], 'mouseover', ...

  4. freemarker 遍历树形菜单

    <ul class="nav sidebar-menu"> <!--Dashboard--> <!-- 定义遍历方法 --> <#macr ...

  5. ftp 添加用户及修改用户目录

    添加用户 : useradd 用户名 -s /sbin/nologin //限定用户test不能telnet,只能ftp; usermod -s /sbin/bash 用户名 //用户恢复正常 ;该账 ...

  6. 毕业设计 python opencv实现车牌识别 矩形矫正

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  7. 75th LeetCode Weekly Contest All Paths From Source to Target

    Given a directed, acyclic graph of N nodes.  Find all possible paths from node 0 to node N-1, and re ...

  8. django 自带的验证功能

    django.contrib.auth提供了很多验证方法 authenticate(): 提供了用户认证,在自带的数据库表中验证用户名和密码,需要username和password两个关键字参数 如果 ...

  9. 4.AOP

    1.代理模式 代理模式(Proxy Pattern)是GoF23种常用设计模式之一使用代理模式创建代理对象,让代理对象控制目标对象的访问,并且可以在不改变目标对象的情况下添加一些额外的功能包括静态代理 ...

  10. centos7-根据端口号查看所属应用

    [root@cent7-zuoys ~]# netstat -lnp | grep 8080 [root@cent7-zuoys ~]# ps 4735