全高侧边栏

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是一个更简洁的解决方案，但不是快速解决方案。