Question

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

很难准确解释页面是如何布局的，因此我将我的网站放入jsfiddle的基本形式，链接here。

<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保留网站。

提前致谢。马特

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);
  }

});

Here is the JSFiddle demo

Answer 2

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

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

2 个答案: