Simple way to add a buffer to the bottom of a page?

Question

I have a single page app. DIV is absolute positioned. Content is ajax'd into this DIV. The content varies in length from a few hundred px height to 1500+px in height.

This container must remain absolute because I am using jQuery easing effects to preform content transitions.

Problem is that the DIVis cut off at the bottom. I would like a buffer of 100px at the end of the content DIV.

My idea is to use a relative DIV behind it with a negative z-index while using the height of the content DIV and adjusting by 100px plus to create a buffer.

Getting the height of content DIV doesn't seem to work. So I'm getting the height of the document instead *(maybe I'm doing this wrong?)*.

The problem with getting the height of the document is that it keeps growing on each iteration which is not the true length of the content DIV.

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

So I decided to make an array which can store the previous height values:

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

This approach works but I'm not ecstatic about it. I need a simpler solution. How can I do this? Perhaps pure CSS or other simple alternatives exist? Please give recommendations. Or perhaps optimize my code? Thanks.

why didn't you try `margin-bottom:100px` or ` padding-bottm:100px` for the absolute div — sanjeev, Feb 28 '14 at 04:01
Have you tried `#content { padding-bottom: 100px; }` or `body {padding-bottom: 100px;}`? — BenjaminGolder, Feb 28 '14 at 04:01
I'm not sure what you are trying to do yet? You're trying to stick the thing to the bottom? There are several examples here: http://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered — DrLivingston, Feb 28 '14 at 04:03
When you are reading and distributing the returned data, could you just append "x" blanks ( ) to the end of the data that would give you 100px? — TimSPQR, Feb 28 '14 at 04:23

MrPizzaFace · Accepted Answer · 2014-02-28T05:11:31.907

The solution is to create a relative positioned DIV beneath the absolute positioned content DIV and dynamically update the height of the relative DIV based on the scrollHeight of page. This gives the desired effect and works beautifully.

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

Simple way to add a buffer to the bottom of a page?

1 Answers1