全高側邊欄

Question

我有以下帶側邊欄的頁面： https : //www.slagerijrudi.be/product/broodje-ham/

我想知道是否有一種簡單的方法可以使我的側邊欄與側邊欄旁邊的內容高度相同。 所以側邊欄應該從頁眉延伸到頁腳，而不是停在頁面的一半。

Answer 1

為了使aside （或邊欄），以達到充分的高度，你可以把它擁有的絕對位置。 請記住，對於較小的屏幕尺寸（您希望折疊側邊欄）將其關閉。 目前最好的設計實踐是為大屏幕聲明特定的行為： @media screen and (min-size:667px) { .. your code for big screens here .. }

添加以下內容以解決問題：

.wf-wrap {
  position: relative;
}

.sidebar {
  position: absolute;
  left: 0;
  height: 100%;
}

編輯：正如對問題的評論所說，flexbox 是一個更簡潔的解決方案，但不是“快速修復”。