Css layout for footer at bottom with dynamic ajax content changing page height
[Update]
I actually compromised this issue by ditching the fixed footer design.
There seems to be no problem with dynamic content moving the footer and resizing the containers appropriately if the footer was not initially set to the bottom of the browser.
I hope others eventually provide a great solution that covers the best of both worlds.
I've spent all day trying to get the footer to move around the page to accommodate the dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
I have a few pages on my site that only start with a text box and a button, so the total height of the content area is just a few inches below the header area.
I have no problem getting the sticky footer to work so that the footer appears at the bottom of the browser window even when there is little content on the screen.
The same css layout works great for other pages that have content spreading under the browser window.
Catch:
The content should be rendered and passed to the browser with a bootstrap.
Problem:
Any content that is added to the page via AJAX after initial loading renders the page nicely, but the footer remains in its original location.
Please tell me there is a fix. I can't post the css until I get to work with my boss first - if possible - and I will later if need be, but this is just a very basic version of many sticky CSS footer solutions floating around the net.
Thank.
source to share
It looks like your footer is using display: fixed
or similar. Try changing your footer container to:
bottom: 0;
display: block;
position: absolute;
This will ensure that it displays right at the bottom of whatever container it is in (I assume the tag <body>
). Now your problem is making sure it appears at the bottom of the screen and not at the bottom of the document, which starts out much shorter. You can do this in a number of ways, but perhaps the simplest would be to set the minimum height in the 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 */
Another approach is that you are using a JavaScript library (suppose?) To grab the content you want, maybe you can also adjust the height of the AJAX content container or change the CSS footer after that content has loaded?
source to share
Currently fixed a similar situation with a little jQuery and CSS where the parameter is the bottom div (ie $ ("# mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bind this function to $ (document) .ready and $ (window) .resize. If the ajax call resizes the body, this should also be called after the content has loaded.
source to share
Without some code, it's hard to tell what the problem is.
However, I'm using a sticky footer as described here , which works really well, although I haven't added ajax content to it. Browser resizing is just fine.
source to share
I'm not sure if you are looking for this, but I am also facing the same problem in front of the same CSS where my content overlaps in the footer when I call the ajax method via jQuery.
Now I found a solution: just get the height of the div via jQuery and apply the height to the div where you return the results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is the div id.
source to share
I solved the same problem with the following code, where content is the div id, where the loading and footer of php pages is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}
source to share