[mdc]

Does anyone know if it's possible to pad the bottom of my html with blank space, if there are scrollbars on the page?

Take this page on my website for example. There are a lot of comments on the left which cause the page to scroll. Scrolling to the bottom of the page and clicking the "Post Your Thoughts" link loses the effect of the sliding comments form.

I'd like to pad the bottom of the HTML, like body { padding-bottom: 100px; } type thing, but only if there are scrollbars on the page. I don't want the padding to cause scrollbars, and then people scroll to nothing.
Any ideas?

[besson3c]

Originally Posted by mdc 

Does anyone know if it's possible to pad the bottom of my html with blank space, if there are scrollbars on the page?

Take this page on my website for example. There are a lot of comments on the left which cause the page to scroll. Scrolling to the bottom of the page and clicking the "Post Your Thoughts" link loses the effect of the sliding comments form.

I'd like to pad the bottom of the HTML, like body { padding-bottom: 100px; } type thing, but only if there are scrollbars on the page. I don't want the padding to cause scrollbars, and then people scroll to nothing.
Any ideas?

Using Javascript you can determine the height that the user's browser window is set to.

How about feeding a JS function you create the number of comments on the page, and have the function determine whether or not to add the padding based on the average length of a comment? If there are enough comments, you can add that padding via a body onload.

Make sense?

[besson3c]

IOW:

- php code to determine number of comments: $num_comments = mysql_num_rows($result)
- body onload="myfunction($num_comments)"

Javascript:

function myfunction (num_comments) {
var browserheight = (can't remember this code)
var commentsize = 50; // in pixels
var space_to_allocate = commentsize * num_comments;
if (browserheight < space_to_allocate) {
document.getElementById('divblock').style = padding-bottom:100px; (I think this is right)
}
}

This approach doesn't work well if the user increases their browser font size though. There is no great way to equate browser height to the number of lines required by text.

[besson3c]

Another way to do this is after the javascript call to expand the comment block, do a window.location.href = #bottomofpage where #bottomofpage is an anchor point set below where the comment block is loaded into.

This may not work well in all browsers, but you could try it.