ご利用の前に 質問・不具合報告 配布中のテンプレート

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告

[CSS]背景画像がある場合のフッター固定

えー、以前書いた『[CSS]フッターを常に画面の下に固定する』ですが、ちょっと難ありなようですね。

背景画像をrepeat-xで設定している場合なんですが(他のケースは知らんですw)、内容量が少ない場合はいいんですけど、内容量が増えたとき、こんな感じになってしまいます。

サンプルページ(別窓)

ウィンドウを小さくしたり大きくしたりしてみると分かると思うんですけど、背景画像がウィンドウの大きさに合わせたっきり、動いてくれないんですね。
コンテンツの内容量は無視し、ウィンドウの最下部を頑なに維持。
なので内容量が少ない内はいいけど、内容量が増えるとおかしなことに。

そ こ で
簡単に誤魔化せる手を。


CSS


html {
background-color: #カラーコード;
}


参考:CSS Happylife(http://css-happylife.com/)


これだけヽ(´ー`)ノ

これをすると、こうなります

※クリックででかくなります(´・ω・`)
サンプル

(因みになぜこっちだけ画像かというと、下のFC2の広告リンクのせいで意図しない形になるため。)

どういうことかというと、背景画像は従来通り敷いてます。
んで、その画像の更に後っかわに、画像と同じ色を指定してやるわけですね。
画像がグラデーションなら、グラデーションの終わりの色を指定してやればいいわけです。

そうすると、本来は内容量が少ないとbodyで指定した色が剥き出しになるところが、htmlで指定した色になるので、自然に誤魔化せるわけです。

まぁ今回のサンプルの様に、色の差が激しかったりあまりにも内容量が少ないと、ちょっと見栄えが良くないけど、ないよりはいいかと。


というか、ホントにこの方法しかないのかな……?(;-ω-)ンー
以前の『[CSS]フッターを常に画面の下に固定する』の様な感じで、尚かつ背景画像も一緒にフレキシブルに動いてくれる方法をご存じの方、是非教えてくださいo(*_ _ )oペコ



【 追 記 】

親切な方が、うまくいく方法を教えてくださいました+。:.゚ヽ(*´∀`)ノ゚.:。+
関連記事

CSS・(X)HTMLComment(2) |Trackback(0)

<<フォームボタンの装飾 | ホーム | [CSS]フッターを常に画面の下に固定する>>

通りすがりの者です。
これでどうでしょうか?
フッター箇所を「container」の外に出して、
CSSの下記の部分を変更すればうまくいきますよ。
bodyの部分
下記部分はフッターがcontainerの外に出たので必要なくなる
background
.twoColFixLtHdr #footerの部分
sidebar1をfloatで行っているので下記は必要なくなる。position:absoluteは絶対指定なのでフッターをcontainerの中を外に出した場合は内容が多くなると下にずれなくなくなるので、
フッターの中を座標指定で配置する時は親要素(この場合#footer)はposition:relative;にすれば内容が増えても下にずれる。
position

2008.12.08
通りすがりの者 URL[編集]
■通りすがりの者さん

初めまして┏○"ペコ
早速ですが、試してみました!
そして成功しました!!+。:.゚ヽ(*´∀`)ノ゚.:。+
後日記事で紹介させて頂きたいと思います(*´∀`*)
有り難う御座いました。
本当に助かりました。

2008.12.09
earlgrey* URL[編集]
   ※コメントは承認制です。














管理者にだけ閲覧を許可する

トラックバックURL
http://conveniweb.blog81.fc2.com/tb.php/3-cf4fe76e
この記事にトラックバックする(FC2ブログユーザー)

| HOME |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。