コンテンツが多い、少ないに関わらず、フッターをページ最下部に固定したいのですが、

CSSでどうしてもできません。

absolute周りがポイントと思い、いろいろ試したのですが、実現できませんでした。

下記サイトのようになります。
http://white-owl.jp/boutique/kaigo/?s=fad&search=%E6%A4%9C%E7%B4%A2

このサイトのCSSを「具体的に」どのように直せば実現できるかご教授頂けませんでしょうか。
よろしくお願い致します。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/06/06 22:05:34
  • 終了:2010/06/07 22:46:23

ベストアンサー

id:kaz No.5

kaz回答回数200ベストアンサー獲得回数422010/06/07 22:23:39

ポイント80pt

レイアウト崩れは、float での配置がうまく行っていない為と思われます。

以下のコードを追加してみてください。

#content,#left,#right {
float: left;
}

#content {
width: 100%;
margin: 0 0 15px 190px !important;
width: 600px;
}

#left {
width: 190px;
margin-left: -790px;
margin-bottom: 15px;
}

#right {
width: 190px;
margin-bottom: 15px;
}

なお、#content の「!important」は、もともとの設定を書き換えれば不要です。

上記では、書き換えず上書きするために使っています。


#container の clearfix で対処したのでは無いようなので、

#content,#left,#right それぞれの margin-bottom で、

#footer までの空きを調整しています。

id:keyboo

おぉ!!

ばっちりできました!

!importantも初めて知りました。

今のコードを書き換えることなく、上記コードを追加するだけでテストできたのですごい楽でした。

ご回答ももちろん助かったのですが、こちらの意図を汲み取って頂いたり、こちらの知識レベルに合わせてご回答頂いたことにすごく感謝です。

本当にありがとうございました。

2010/06/07 22:43:55

その他の回答(4件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252010/06/07 01:39:21

ポイント10pt
<div style="position:fixed; bottom:0px;">
下に固定(IE6非対応、それ以外は大抵OK)
</div>
id:keyboo

大変申し訳ありません。

私が「absoluteを使ってフッターをページ最下部に固定する」ということ自体、完全に勘違いをしており、皆様に誤解を与えてしまいました。

私がイメージしていた「フッターをページ最下部に固定」とは、3カラムあるサイトで真ん中のコンテンツが多ければそのコンテンツの下にフッターが、一方真ん中のコンテンツが少なければ(例示したページ)、3カラム中では右サイドバーが一番長いのでその下にフッターが、ということが実現できないかということでした。

例示したページではなぜか、フッターが上の方にきてしまうのです。そういう質問にした方が良かったですね。

2010/06/07 10:22:40
id:ko8820 No.2

ko8820回答回数1221ベストアンサー獲得回数692010/06/06 22:14:18

ポイント10pt

http://css-eblog.com/csstechnique/footer-position-fixed.html

こんなかんじでしょうか?

もしくは、

<div>

左div

中央div

右div

</div>

<div>

フッターdiv

</div>

divでもう少し構成を変えます。

id:kaz No.3

kaz回答回数200ベストアンサー獲得回数422010/06/07 01:54:46

「フッタの下部固定」というと、一般的には「メイン・サブとも短い場合でも下部に固定」事ですが、

サンプルを拝見したところ、「メイン・サブいずれかの長いパーツの下に配置」で良いでしょうか。


手順1:左サイド・右サイドを absolute ではなく float でレイアウトする

理由:absolute で配置された要素には「幅・高さ」が存在しない扱いになるため、

   見た目上表示されていても、ブラウザはそれが無いものとして振る舞います。

   つまり、ブラウザにとって、あの場に存在しているのは、真ん中の

   「Not Found 〜 ページの先頭へ」だけなのです。

   float で寄せたものは「幅・高さ」とも認識されます。


手順2:#footer に clear:both を設定する。

    (#container を clearfix するか、同等の手段で高さを確保しても OK)

id:keyboo

>「メイン・サブいずれかの長いパーツの下に配置」

そうです。私の言葉足らずまで汲み取っていただいてありがとうございます。

試してみたのですが、レイアウトが崩れてしまいました。

手順1の理由でヒントを頂いたので、それをキーワードに調べて試したところ、あと一歩(?)まで行きました。

具体的には左右のサイドバーは「あるもの」として認識させられたのですが、

次のような配置になりました。(□→スペース、■→コンテンツ)

□■□ ←真ん中のコンテンツ

■□■ ←左右のサイドバー

■■■ ←フッター

2010/06/07 22:19:43
id:Koriki-kozou No.4

小力小象回答回数53ベストアンサー獲得回数02010/06/07 18:41:00

Little Braver

Little Braver

  • アーティスト: Girls Dead Monster
  • 出版社/メーカー: アニプレックス
  • 発売日: 2010-06-09
  • メディア: CD

id:kaz No.5

kaz回答回数200ベストアンサー獲得回数422010/06/07 22:23:39ここでベストアンサー

ポイント80pt

レイアウト崩れは、float での配置がうまく行っていない為と思われます。

以下のコードを追加してみてください。

#content,#left,#right {
float: left;
}

#content {
width: 100%;
margin: 0 0 15px 190px !important;
width: 600px;
}

#left {
width: 190px;
margin-left: -790px;
margin-bottom: 15px;
}

#right {
width: 190px;
margin-bottom: 15px;
}

なお、#content の「!important」は、もともとの設定を書き換えれば不要です。

上記では、書き換えず上書きするために使っています。


#container の clearfix で対処したのでは無いようなので、

#content,#left,#right それぞれの margin-bottom で、

#footer までの空きを調整しています。

id:keyboo

おぉ!!

ばっちりできました!

!importantも初めて知りました。

今のコードを書き換えることなく、上記コードを追加するだけでテストできたのですごい楽でした。

ご回答ももちろん助かったのですが、こちらの意図を汲み取って頂いたり、こちらの知識レベルに合わせてご回答頂いたことにすごく感謝です。

本当にありがとうございました。

2010/06/07 22:43:55

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません