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

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

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

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

A 回答 (3件)

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;
}
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2006/02/10 14:30

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



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

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

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

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

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

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

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

お礼日時:2006/02/09 18:12

footer を固定しているサイトを紹介された方が早いのでは?


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

この回答への補足

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

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

補足日時:2006/02/08 15:38
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

今、見られている記事はコレ!

おしトピ編集部からのゆる~い質問を出題中

お題をもっとみる


このカテゴリの人気Q&Aランキング

おすすめ情報

カテゴリ