Need to keep div containing iFrame at the bottom of the browser_问答_开发者

Need to keep div containing iFrame at the bottom of the browser

开发者 https://www.devze.com 2023-02-05 04:14 出处：网络

I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window.I need it to remain fixed there when the page scrolls (or at least update its p

I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window. I need it to remain fixed there when the page scrolls (or at least update its position). I've tried

position: fixed; bottom: 0px; left: 0px

but to no avail. I ca开发者_StackOverflow社区n do this easily if I want the div at the top of the screen, I just update the div top to the value of document.body.scrollTop. Any help would be greatly appreciated.

Capture the window.onresize event. In that event handler, calculate the x,y position of the div based on the scroll position and of the window. Set the top and left attributes of the div to the x,y coordinates you calculated. You will also want to position the div using the window.onload event to make sure it starts out in the correct position.

Remember to set the doctype, then it should work fine... the following example works in ie7/ie8/firefox/chrome (it will not work for ie6) and probably more browsers:

<!DOCTYPE html>
<html>
<head>
<style>
#stay-at-bottom { position: fixed; bottom: 0; left: 100px; width: 500px; height: 200px; overflow: hidden; background: #f00;}
#stay-at-bottom iframe { width: 500px; height: 200px; position: relative; }
</style>
</head>
<body>
<div id="stay-at-bottom"><iframe src="http://google.com"></iframe></div>
</body>
</html>