I have an iframe that contains a page that is constantly updating (basically a logger type thing). Is there a way (either via JS/jQuery or otherwise) to force the iframe to stick to the bottom of that inner page even as it expands?

I basically want to mimic the way may log viewers stick to the tail of a log file as it is updated. I found a similar question already here, but the solution doesn't seem to work within an iframe context (similar question).

Update: Just to clarify, I don't want the iframe at the bottom of the page. I want the contents inside the iframe to stay scrolled to the bottom. The iframe has a fixed height, and after the page loads, additional lines are added to that inner page and I want to force the iframe to always show the bottom of that inner page.

I have an iframe that contains a page that is constantly updating (basically a logger type thing). Is there a way (either via JS/jQuery or otherwise) to force the iframe to stick to the bottom of that inner page even as it expands?

I basically want to mimic the way may log viewers stick to the tail of a log file as it is updated. I found a similar question already here, but the solution doesn't seem to work within an iframe context (similar question).

Update: Just to clarify, I don't want the iframe at the bottom of the page. I want the contents inside the iframe to stay scrolled to the bottom. The iframe has a fixed height, and after the page loads, additional lines are added to that inner page and I want to force the iframe to always show the bottom of that inner page.

• javascript
• jquery
• iframe

4 Answers 4

Can be achieved using just CSS

iframe{
   position: absolute;
   left: 0;
   bottom: 0;
}

This will position the iframe relative to the body and it will always appear on the bottom.

does the iframe keep refreshing, and adding content.. or does it keep the connection open? if it isn't keeping the connection open... document.scrollTo() is the javascript method you are looking for.. if you are using ajax to append the information.. do a scrollTo where the number is VERY large 0xFFFFFF should work.

Maybe add overflow:hidden in there also

This iframe at bottom of page only works when there is not a scroll bar in HTML but as the Y axis increases this will not be moved at the bottom of page.