javascript - 使 Div 固定底部和可滚动

Question

我想要一个长页面，有一个固定的顶部 100px div 和一个固定的 50px 底部 div。但是，我希望底部的 div 在您向下滚动页面时滚动。

这很难解释，但最好的例子是PayPal.com 的首页。

在第一个页面加载时，底部的 div 看起来是固定的，而当您调整浏览器窗口的高度时，该 div 会停留在底部。然而，当您向下滚动页面时，它并没有固定。

谁能解释一下他们是怎么做到的？我正在尝试重新创建类似的东西，但看不到他们是如何管理它的。

据我所知，他们有这个 html...

<div id="fixed-top">
  <header class="table-row">
    // header content
  </header>
  <div class="table-row table-row-two">
    // Video content
  </div>
  <div class="table-row">
    //bottom content
  </div>
</div>

还有这个 CSS...

#fixed-top {
    height: 100%;
    width: 100%;
    display: table;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.table-row {
        display: table-row;
}

但仅此一项并不能做到这一点。我也看不到任何获取窗口高度并将其应用于主要固定 div 的 js。

帮助! :)

编辑:

刚刚找到了一种使用 javascript 的方法，使用窗口高度控制中间行的高度，减去标题和第三行的 150px。

jQuery(document).ready(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});

    $(window).resize(function(){
    $('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
    });
});

但话虽如此，Zwords CSS only 方法似乎更胜一筹。

Answer 1

据我了解，您正在寻找类似粘性页脚的内容。所以基本上如果内容不够，页脚应该固定在底部，但如果有内容，它应该像其他内容一样向下滚动。

试试这个 - http://css-tricks.com/snippets/css/sticky-footer/