可変画像の下にdivを後続で配置させるには？

質問

http://www.jormungand.tv/

上記サイトのトップページで、ソースを見ると「<img id="index"＞」をCSSにて「position:absolute;　width:100%;」とすることにより、画像を背景画像のようにしてウィンドウサイズに合わせて拡大縮小させているようです。
そこまではわかるのですが、そのあと「<div id="footer">」が、その可変画像の下に続いているのが、どうやってやっているのかわかりません。

上記サンプルサイトのように、
「position:absoluteの可変画像」の下に、「divなどブロック要素を後続で続けて配置する」方法を教えてください。よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

javascriptを使用して、その上にあるwrapperの縦サイズとfooterのmarginを変更しています。
　当然ですが、javascriptが無効だと動作しません。

　そんな複雑な事をしなくても、単に画像を伸縮させて置けばよいものを・・・。
　もっと簡単にシンプルで良い方法があります。

　firefox + firebugにて・・

回答No.2

font_color

はじめまして。

main.jsによると

$(window).load(function() {

$('#wrapper').css({'height':$(window).width()})
$('#footer').css({'top':$(window).width()})
})

$(window).resize(function() {
$('#wrapper').css({'height':$(window).width()})
$('#footer').css({'top':$(window).width()})
})

javascript（jquery）を使ってロード時とリサイズ時に
ウィンドウの幅を取得してフッターの位置を指定しているようですね。

なぜかトップからの縦の位置を「ウインドウの横幅」で指定しているため
縦長の画面にすると崩れまくっていますが・・。

試してませんがwarrper外に要素を追加し、その要素に
絶対値を入れて画像とフッターを内包すれば
CSSのみでもおそらく実装可能かと思いますよ。