固定位置div，可调整相对于页脚的高度

Question

我正在开发一个网站，该网站有两个边栏和一个页面内容的中心包装器。侧栏将有链接，将用户跳转到网页的相关部分。这些边栏有一个固定的位置，这样当用户向下滚动页面时，它就会跟随用户，但当用户到达页面底部的页脚时，我希望边栏高度缩小，这样页脚就不会阻挡这些边栏中的链接。

很难准确解释页面的布局，所以我把我的网站放在了jsfiddle中，它的基本形式，链接在这里。

<div class="left">Lorem Ipsum ...</div>
<div class="centre">centre</div>
<div class="right">Lorem Ipsum ...</div>
<div class="footer">footer</div>

我希望页脚（灰色）和边栏（红色）之间始终有20像素的边距，但我还不知道如何使它们相对于进入浏览器窗口的页脚缩小。

理想情况下，我不想使用JavaScript，如果可能的话，网站主要使用HTML和CSS。

提前谢谢。Matt

Answer 1

我就是这样做的：

var spacing = 50;
var defaultHeight = $(".left").outerHeight();
$(window).scroll(function() {
  var calcHeight = $(".footer").offset().top - $(window).scrollTop() - spacing;
  if (calcHeight < defaultHeight) {
    $(".left, .right").height(calcHeight);
  } else {
    $(".left, .right").height(defaultHeight);
  }
});

这是JSFiddle演示

Answer 2

使用z-index或使用javascript或jquery代码。