人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

コンテンツが多い、少ないに関わらず、フッターをページ最下部に固定したいのですが、
CSSでどうしてもできません。

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

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

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



●質問者: keyboo
●カテゴリ:ウェブ制作
✍キーワード:absolute CSS コンテンツ サイト ポイント
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● y-kawaz
●10ポイント
<div style="position:fixed; bottom:0px;">
下に固定(IE6非対応、それ以外は大抵OK)
</div>
◎質問者からの返答

大変申し訳ありません。

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

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

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


2 ● ko8820
●10ポイント

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

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

もしくは、

<div>

左div

中央div

右div

</div>

<div>

フッターdiv

</div>

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


3 ● kaz
●0ポイント

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

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


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

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

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

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

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

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


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

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

◎質問者からの返答

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

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

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

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

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

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

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

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

■■■ ←フッター


4 ● 小力小象
●0ポイント

Little Braver

Little Braver

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


5 ● kaz
●80ポイント ベストアンサー

レイアウト崩れは、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 までの空きを調整しています。

◎質問者からの返答

おぉ!!

ばっちりできました!

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ