css layout for footer at bottom with dynamic ajax content changing height of page_问答_开发者

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

开发者 https://www.devze.com 2022-12-08 16:10 出处：网络

[Updat开发者_开发百科e] I actually compromised on this problem for now by foregoing the fixed footer design.

相关专题：css layout

I actually compromised on this problem for now by foregoing the fixed footer design.

It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.

I hope others will eventually provide a great solution that encompasses the best of both worlds.

I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.

Basically:

My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.

I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.

That same css layout works fine for other pages that have content that extends beneath the browser window.

The catch:

The content has to be rendered and passed to the browser with the initial load.

The Problem:

Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.

Please tell me there is a fix for this. I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.

Thanks.

Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):

function positionFooter(obj){
    if ($("body").outerHeight(true) > $(window).height()) {
        obj.css("position","relative");
    } else {
        obj.css("position","fixed");
        obj.css("bottom","0px");
    }
 }

Bound this function to $(document).ready and $(window).resize. If ajax call resizes body, this should be called also after content load.

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?

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.

Use include in PHP and call the footer after the dynamic content appears.

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 height 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.

I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.

var footerAdjustId = setInterval(adjustFooter, 2000);

function adjustFooter(){
    $("footer").css("marginTop", $("#content").height() - $(window).height());
    clearInterval(footerAdjustId);
}