视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS等高布局的6种方式-小火柴的蓝色理想
2020-11-27 16:44:18 责编:小采
文档

×
目录
[1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js

前面的话

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

伪等高

边框模拟

  因为元素边框和元素高度始终是相同高度,用元素的边框颜色来伪装左右两个兄弟元素的背景色。然后将左右两个透明背景的元素使用absolute覆盖在中间元素的左右边框上,实现视觉上的等高效果

  [注意]左右两侧元素的内容高度不能大于中间元素内容高度,否则无法撑开容器高度

left

center

center

right

负margin

  因为背景是在padding区域显示的,设置一个大数值的padding-bottom,再设置相同数值的负的margin-bottom,使背景色铺满元素区域,又符合元素的盒模型的计算公式,实现视觉上的等高效果

  [注意]如果页面中使用锚点跳转时,将会隐藏部分文字信息

  [注意]如果页面中的背景图片定位到底部,将会看不到背景图片

left

center

center

right

真等高

table

  table元素中的table-cell元素默认就是等高的

left

center

center

right

absolute

  设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

left

center

center

right

flex

  flex中的伸缩项目默认都拉伸为父元素的高度,也实现了等高效果

left

center

center

right

js

  当子元素高度不同时,进行js判断,增加较低子元素的padding-bottom,使得各个子元素实现等高效果

left

center

center

right




显示全文
专题