如何实现等高布局

本期介绍实现等高布局的几种方法；

一、Padding Margin互怼

效果图:

HTML代码：

CSS代码：

通过设置margin-bottom：-10000px;和padding-bottom:10000px;margin采用自己的负技术将padding定义的超大值给封印了，维护了页面表面的安定。需要注意的是这种写法需要预估页面内容的高度，设置一个页面高度无法超越的值；还有就是文字内容多的一方，底部无法控制边距。当然可以通过hack解决，用空标签来绝对定位模拟实现边距或者边框等想要的效果。

二、Flex大法

效果图：

HTML代码

同上

CSS代码：

将包含等高布局div的父div设置为flex布局，派出align-items：stretch大将马到成功实现等高布局，想要自适应的话，可以去掉宽度设置，子元素改为flex:1;

缺点是兼容性不太好

三、"上古"神器：table-cell

说"上古" 主要是跟table挂钩了

效果图：

HTML代码

同上

CSS代码：

这种方法兼容性还可以IE8+，不足之处是对margin无感，设置margin无效；效果图上左右背景图颜色一样，设置margin无效；中间白色分割线是border的效果

最后：

以上几种方法可以给大家在面对等高布局的需求的时候提供一些思路，最近可能会接一个前端相关广告，顺利的话，会送出一本张鑫旭大神新书《CSS世界》，用冯大辉老师无码科技的无黑幕的抽奖助手设置抽奖