ansaurus

Question

css layout for footer at bottom with dynamic ajax content changing height of page.

Answer 1

+1 A:

It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:

bottom: 0;
display: block;
position: absolute;

That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:

min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */

The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?

Phil.Wheeler 2009-10-09 00:26:16

I think you must be hinting at the solution - which, unfortunately means that I can't just rely on css.The css that you provided doesn't solve the problem - but the idea that I'm going to have to modify the heights of containers through code is probably more in line with what's required.

42 2009-10-10 14:24:42

Answer 2

A:

Without any code it´s hard to tell what the problem might be.

However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.

jeroen 2009-10-09 01:55:50

Answer 3

A:

use include in php and call the footer after the dynamic contents appear

jewel 2009-12-24 02:59:44

Answer 4

A:

Hi guys,

I m not sure you are looking for this, but i am also facing the same problem before and same css, where my content overlaps on the footer when i call the ajax through jquery method.

Now i found the solution just get the div hegiht through jquery and apply the height to the div where you are returning your results from ajax.

var obj = $("#viewcomm").height(); if($.browser.msie) { $("#viewcomm").height(obj).css({cursor:"auto"}); }

where here viewcomm is div ID.

thanks

Abden 2010-09-02 12:06:03

ansaurus

tags:

views:

answers:

css layout for footer at bottom with dynamic ajax content changing height of page.

related questions