• 締切済み

フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法

現在 http://www.stylish-style.com/csstec/ultimate/fix-foot.html で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、 #mainのheightは100%-フッタ用パンディングの30pxとなっています。 #main内にヘッダ、ナビゲーションを上部から順に配置し ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。 ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。 私の考えている表示としては、 (1)コンテンツ部は常にフッタまでボックスを広げる。 (2)コンテンツがoverflowした場合はスクロールする。 この2点をクリアさせたいです。 #main2のheightをピクセルで固定させればできそうですが 解像度の変化に対応できないと思うので… どなたか良い方法を知っている方がいれば教えていただければ幸いです。 htmlとcssは下記URLです。 http://beatprovider.info/test/index.html http://beatprovider.info/test/style_d.css よろしくお願いします。

みんなの回答

回答No.1

普通はフッタをposition:fixed;でbottom:0px;してしまえば、あとはコンテ ンツのpadding-bottom:をフッタの高さ分指定しておしまいです。 そのサイトは最近のブラウザで唯一position:fixed;に対応できないIE6を ナントカしようと思って失敗しているんでしょう。「position:fixed IE6」で 検索すると他の手口が見つかりますので、色々試してみるといいでしょう。

madaya
質問者

お礼

御礼が遅くなりました。 position:fixedでフッタヘッダを固定できれば 楽にコンテンツ部分をオバーフローできそうですね。 CSSは最近学び始めたので各ブラウザの表示が違いすぎて難儀しています。 その補完のためにもjsも勉強していく必要がありそうですね。 よい回答ありがとうございます。

関連するQ&A