Question

我有一个单页应用。 DIV绝对定位。内容是这个DIV的内容。内容的长度从几百px高到1500 + px的高度不等。

此容器必须保持绝对，因为我使用jQuery缓动效果来预先形成内容转换。

问题是DIV在底部被切断了。我想在内容DIV的末尾添加100px的缓冲区。

我的想法是在使用内容DIV的高度并使用100px加上来创建缓冲区时，使用负z-index后面的相对DIV。

获取内容DIV的高度似乎不起作用。所以我获取文档的高度而不是 *（也许我正在做这个错误？）*。

获取文档高度的问题在于它在每次迭代时都会不断增长，这不是内容DIV的真实长度。

function adjustPageBottom() {
  var h;
  h = $(document).height();
  $("#pad_bottom").css( 'height', h+'px' );
}

所以我决定创建一个可以存储先前高度值的数组：

var heights = [];
function adjustPageBottom() {
    var h, res;

    h = $(document).height();
    heights.push(h);

    switch (heights.length) {
      case 3:
        heights.shift();
      case 2:
        res = heights[1] - heights[0];
        break;
      case 1:
        res = heights[0];
        break;
    }
    $("#pad_bottom").css( 'height', res+'px' );
}

这种方法有效，但我并不欣喜若狂。我需要一个更简单的解决方案。我怎样才能做到这一点？也许纯CSS或其他简单的替代品存在？请提出建议。或者也许优化我的代码？感谢。

Answer 1

解决方案是在绝对定位内容DIV下创建一个相对位置DIV，并根据页面的DIV动态更新相对scrollHeight的高度。这给出了期望的效果并且工作得很漂亮。

<强> HTML：

<div id="page_buffer" style="position:relative; z-index:-1;"></div>

<强> jQuery的：

function adjustPageHeight() {
  $('#page_buffer').css('height','1px'); // important reset:
    // reset buffer height before recalculating the scrollHeight
  var h = $(document.body)[0].scrollHeight;
  $('#page_buffer').css('height',h+'px');
}

将缓冲区添加到页面底部的简单方法？

1 个答案: