讓 sidebar 與 main 背景顏色等高

以前常見的切版會是一個側欄 (Sidebar)加上一個主要的內容 (Main)

如果 Main 要有背景顏色,Sidebar 也要有另一種背景顏色,就會發現一個問題

某些頁面 Main 比較高,有些頁面 Sidebar 比較高,怎麼看背景顏色都不會一樣高…

所以就被出了一道題目拉!我就是要讓 Main 與 Sidebar 的背景顏色高度一樣高!!

先看看問題吧!

接著看看解法:

解法 1:Padding-bottom + Margin-bottom

使用 padding-bottom 與 margin-bottom 把自己撐開,再把自己縮回去…

這是一種有 fixed 的 nav-bar 時又要 anchor 時常用的做法!!

優點:

  1. CSS 簡單撰寫
  2. DOM 結構簡單
  3. 不用寫 JavaScript

缺點:

  1. parent 需要下 overflow:hidden
  2. 如果 Sidebar 或是 Main 有 position:absolute 的東西會被切掉

解法 2:::before 或 ::after

使用偽類來時做背景,並且使用 position:absolute 做定位,讓其與 Sidebar 或是 Main 等寬

搭配 top:0 與 bottom:0 就可以稱滿版面,parent 則設定 position:relative,高度就由內容稱開了!

優點:

  1. Sidebar 或是 Main 內的 position:absolute 不會被切掉
  2. DOM 結構簡單
  3. 不用寫 JavaScript

缺點:

  1. CSS 複雜
  2. 偽類的寬度需要寫死

解法 3:圖片

在 parent 上放一張高度 1px 的圖片,讓其 repeat 下來就可以達到效果

因為太簡單了,所以就不寫範例了…

優點:

  1. Sidebar 或是 Main 內的 position:absolute 不會被切掉
  2. DOM 結構簡單
  3. 不用寫 JavaScript
  4. 超簡單!!

缺點:

  1. 要會做一張圖片
  2. 如果有不同的版型,圖片會做很多張

三種解法都不錯,看需求決定要用哪種方法解

可能還有更簡單或是更沒有 side effect 的解法…

如果有更好的解法歡迎在下面留言討論 :D