CSSでfooterをbottomに固定する方法

質問

困りました。どうやってもできません。
コンテンツは固定幅でセンターに、footer幅はリキッドにしているのですが、コンテンツ自体のボリュームが少ない時にfooterがコンテンツにくっついていっちゃうんです。
なので、footerの下に余白ができてしまいます。

このfooterさんをウィンドウをどれだけ広げても、bottomに常駐するようにしたいのです。

どうしても出来ないもので、その方法をされているサイトのfooterのコードをコピーして、そのまま貼り付けても出来ませんでした。
なぜ？？

わかりにくい書き方かもしれませんが、何卒よろしくお願いいたします。

回答No.2

koutarou504 · ベストアンサー

minHeight と pageWrapper にポイントがありそうで・・・。

まだ詳細は検証しきれていませんが、
一部分でなく全体的な相互関係で実現しているみたいですよ・・・。
（一応、ソースの一部書き換えにより、どのＩＤでの指定が必須かまでは検証しましたが・・・。）

また、結構難しそうというか相互関係でなりたっている為に、検証も大変でブラウザの対応確認も大変かもしれません。

お礼

>minHeight と pageWrapper にポイントがありそうで・・・。

どうやらそのようですね・・・。

わたしも色々やってみたんですが、ひとつ違えばIEではだめなのにfirefoxではいける！みたいな変なことになったりします。

確実な方法を探さないと・・・。

ありがとうございました！

回答No.3

noname#22222

s_husky です。

つまり、footer 上部が固定長です。
これは、普通に footer を作ればいいです。
こんな感じです。

/* ==========================================================================================================
mystyle.css: Last update 2005/10/05 By xxxxxxxxx
------------------------------------------------------------------------------------------------------------- */
@charset "Shift_JIS"; /* この外部 CSS の文字コードを「Shift JIS」に設定 */

/* ==========================================================================================================
全体構造
------------------------------------------------------------------------------------------------------------- */
body {
margin: 0; /* 余白をゼロに */
padding: 0;
font-size: 10pt;
text-align: center; /* Win IE 6 で、ブロックレベル要素がセンタリングされないのを防ぐため */
}

/* ==========================================================================================================
トップページに枠線を表示する仕掛け

　┏━━━━━━━┳━━━━━━━━━━━━┓ <--- ../images/toppage/background_header.gif #header

　┃　　　　　　　┃　　　　　　　　　　　　┃ <--- ../images/toppage/background_container.gif #container
　┃　　　　　　　┃　　　　　　　　　　　　┃

　┗━━━━━━━┻━━━━━━━━━━━━┛ <--- ../images/common/h1_gradation.gi #footer
------------------------------------------------------------------------------------------------------------- */

/* ==========================================================================================================
ヘッダ
------------------------------------------------------------------------------------------------------------- */
div#header {
width: 820px;
background: url('../images/toppage/background_header.gif') no-repeat bottom;
}

/* ==========================================================================================================
メイン・コンテンツ
------------------------------------------------------------------------------------------------------------- */
div#container {
width: 820px;
margin-left: auto;
margin-right: auto;
background: rgb(170, 170, 170) url('../images/toppage/background_container.gif') repeat-y;
text-align: left;
}

div#wrapper {
float: left;
width: 80%;
}

div#content {
float: right;
width: 70%;
}

div#sidebarA {
color: white;
float: left;
width: 30%;
text-align: left;
}

div#sidebarB {
float: right;
width: 20%;
}

/* ==========================================================================================================
フッタ
------------------------------------------------------------------------------------------------------------- */
div#footer {
clear: both;
width: 820px;
font-size: 8pt;
margin-left: auto;
margin-right: auto;
background: url('../images/toppage/background_footer.gif') no-repeat top;
}

お礼

コードまで書いていただきありがとうございます。

しかしおそらく例のサイトのような動作は得られないかと思います。

ちょっとした小細工が必要です。普通につくるのでは無理なようです。

回答No.1

noname#22222

footer を固定しているサイトを紹介された方が早いのでは？
footer の上部を固定長ではなく可変にするのは至難と思われます。
一体、どのようにしているのか知りたいところです。

補足

そうなんです。なんか難しいんです。
CSSはある程度理解していると思っていたのですが・・・。

http://www.artgalleriesdirect.com/
このサイトではどれだけウィンドウを動かしても、ついてきます。コードをそのまま使っても不思議なことに、できないんですね。わたしも色々考えているんですが・・・。