一、為何要分欄高度一致？

分欄高度一致的目的是更加美觀。舉兩個例子吧

2.1 對于分欄布局，我們或許會用邊框(border)進行分隔，就如鄙人博客的分欄

此時最擔心的問題就是高度不一致，尤其是無邊框屬性的分欄高度超過有邊框屬性的分欄，結果就會

2.2 對于分欄布局，我們或許會用實色填充背景，看我的雙欄demo頁面

但是，如果兩欄的高度不一致，例如左側的超出了范圍，可能就會

二、純CSS實現側邊欄/分欄高度自動相等

這里直接介紹我認為的最佳的側邊欄/分欄高度自動相等方法。核心的CSS代碼如下（數值不固定）

再配合父標簽的overflow:hidden屬性即可實現高度自動相等的效果

舉個簡單的實例吧，如下CSS及HTML代碼

說明：核心CSS代碼部分的3000像素是個可變值，如果您的分欄高度不可能高度超過2000像素，您就可以設為2000像素，如果會超過3000像素，那么您要修改值為4000像素或是更高。父標簽的overflow:hidden屬性是必須的，否則會顯示溢出的內容。

總結

以上是生活随笔為你收集整理的纯CSS实现侧边栏/分栏高度自动相等的全部內容，希望文章能夠幫你解決所遇到的問題。

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