2011-01-14 6 views
0

私はiFrameを含むdivを持っており、ブラウザウィンドウの下部に常に止まっているようにしたいと思います。ページがスクロールする(または少なくともその位置を更新する)ときに、そこに固定されたままにする必要があります。私は試しましたブラウザの一番下にiFrameを含むdivを保持する必要があります

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

しかし、役に立たないです。 divの上部をdocument.body.scrollTopの値に更新するだけで、これを簡単に行うことができます。どんな助けでも大歓迎です。

+1

あなたはトップをdocument.body.scrollTop + document.body.clientHeight-iframeHeightに更新できます。 – Gerben

答えて

0

window.onresizeイベントをキャプチャします。そのイベントハンドラで、スクロール位置とウィンドウの位置に基づいてdivのx、y位置を計算します。 divの上部および左の属性を、計算したx、y座標に設定します。また、window.onloadイベントを使用してdivを配置して、正しい位置で開始されていることを確認することもできます。

0

それは正常に動作する必要があり、DOCTYPEを設定することを忘れないでください...次の例では、IE7/IE8/Firefoxの/クローム(それは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> 
関連する問題