Ajax Div Maintain Height

Greetings,

I have a list of user comments on a page, with a next button which makes an Ajax call to get the second set of comments.

The problem is, the height of the comments div temporarily becomes very small while the loading bar is in place. This makes the user need to scroll back down to see the new comments

The issue can be seen at the bottom of this page by clicking "Next" comments.

Is there a way to force the div to maintain its height through Javascript? I do not want to hard code the div height in case a page has 3 or开发者_运维百科 less comments.

before loading your ajax-content into the comments section set the height of the comments container like this (jQuery):

 // #comments is just an example. It may not be the same as your comments section.
$("#comments").css("height",$("#comments").height);

then after loading your comments (the ajax complete/success callback) unset the height like this:

$("#comments").css("height","auto");

Add only height() (parenthesis) here

$("#comments").css("height",$("#comments").height);

I know this is an older question but this worked for me.

var containerHeight = $("#comments").height();
$("#comments").css("height",containerHeight);

Then set it to "height auto" when you load in the content.

$("#comments").css("height","auto");