CSS 相对|绝对(relative/absolute)定位系列(三)

1. absolute与等高布局

拿简单的两栏布局举例,左栏与右栏有不同的背景色,且中间隔边框线分隔,如何实现?因为随着内容的不同,有可能左侧栏高度较高,也有可能是右侧栏高度较高。所以,要实现无缝的填色,定高是行不通的,置高度不理显然也不行,此时解决方法就是让左右两栏等高

我较早的时候写过一篇名为“纯CSS实现侧边栏/分栏高度自动相等”的小tip,其实现原理如下

这里写图片描述

后来在“我所知道的几种display:table-cell的应用”一文中也提过使用display:table-cell实现等高布局

这里再介绍些如何使用absolute实现等高布局

点击demo页面中的两个按钮就可以看到无论左侧栏高还是右侧栏高,两边背景颜色纯纯的,中间的垂直分隔线直直的,如下截图

这里写图片描述

这里写图片描述

其中,实现等高效果的核心CSS代码如下

这里写图片描述

全部代码

这里写图片描述

实现原理就是:首先设置一个红色背景的外层容器,这里包含一左一右两个容器,所以不管是左边还是右边的内容增加都会导致外层容器高度增加,进而导致红色背景层增高。然后我们给左边容器设置一个绿色的背景层,这个背景层宽度和左侧容器等宽,但高度是一个9999em的极高的高度,将其覆盖在红色的背景层之上,所以此时看起来的效果两列等高的一绿一红的等高列

这里写图片描述

这里写图片描述

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页