Question

我有一个包含iFrame的div，我想确保它始终停留在浏览器窗口的底部。当页面滚动（或至少更新其位置）时，我需要它保持固定。我试过了

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

但无济于事。如果我想在屏幕顶部使用div，我可以轻松地执行此操作，我只需将div顶部更新为document.body.scrollTop的值。任何帮助将不胜感激。

Answer 1

捕获window.onresize事件。在该事件处理程序中，根据滚动位置和窗口计算div的x，y位置。将div的顶部和左侧属性设置为您计算的x，y坐标。您还需要使用window.onload事件来定位div，以确保它在正确的位置开始。

Answer 2

请记住设置doctype，然后它应该工作正常...以下示例适用于ie7 / ie8 / firefox / chrome（它不适用于ie6）以及可能更多的浏览器：

<!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>

需要将包含iFrame的div保留在浏览器的底部

2 个答案: