1. absolute與等高布局

拿簡單的兩欄布局舉例，左欄與右欄有不同的背景色，且中間隔邊框線分隔，如何實現？因為隨著內容的不同，有可能左側欄高度較高，也有可能是右側欄高度較高。所以，要實現無縫的填色，定高是行不通的，置高度不理顯然也不行，此時解決方法就是讓左右兩欄等高

我較早的時候寫過一篇名為“純CSS實現側邊欄/分欄高度自動相等”的小tip，其實現原理如下

后來在“我所知道的幾種display:table-cell的應用”一文中也提過使用display:table-cell實現等高布局

這里再介紹些如何使用absolute實現等高布局

點擊demo頁面中的兩個按鈕就可以看到無論左側欄高還是右側欄高，兩邊背景顏色純純的，中間的垂直分隔線直直的，如下截圖

其中，實現等高效果的核心CSS代碼如下

全部代碼

實現原理就是：首先設置一個紅色背景的外層容器，這里包含一左一右兩個容器，所以不管是左邊還是右邊的內容增加都會導致外層容器高度增加，進而導致紅色背景層增高。然后我們給左邊容器設置一個綠色的背景層，這個背景層寬度和左側容器等寬，但高度是一個9999em的極高的高度，將其覆蓋在紅色的背景層之上，所以此時看起來的效果兩列等高的一綠一紅的等高列

總結

以上是生活随笔為你收集整理的CSS 相对|绝对(relative/absolute)定位系列（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。