等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现、grid实现和js判断这五种真等高布局 1.边框模拟(伪等高 ...

做一些后台项目，和一下带侧边栏项目的时候登高布局很常用，总结了下有几种 1.margin-bottom方法 这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法。核心的CSS代码如下（数值不固定）： 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果 ...

前言 　　最近，面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定，另一侧宽度自适应的问题，下面稍微总结一下： 先看一道题目 巧妙的多列等高布局 规定下面的布局，实现多列等高布局，要求两列背景色等高。 方法一：使用flex布局 ...

初始时，多个列内容大小不同，高度不同。现在需要设置不同的背景来显示，而且各个列的高度需要保持一致。那么这就需要利用到多列等高布局。 最终需要的效果： 1. 真实等高布局 flex 技术点：弹性盒子布局flex，默认值就是自带等高布局的特点。 定义flex布局的时候，有一些默认值 ...

前面的话 　　全屏布局在实际工作中是很常用的，比如管理系统、监控平台等。本文将介绍关于全屏布局的6种思路 float 【1】float + calc 　　通过calc()函数计算出.middle元素的高度，并设置子元素高度为100% 【2】float ...

...

什么是等高布局? 先来看一个案例： 上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高度保持一致了，左边高度增加，右边也跟着增加，右边高度增加，左边同样也要增加 ...

思路一: float 缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差 【1】float + padding + background-clip 使用padd ...