WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:フッターをいちばん下にもってくるいいcss

0:[投稿] PICTOMANCER [2004/11/16 16:46 ][環境:macOS9,ie5&nn7 わからない]

こんにちは。
フッターをいちばん下に置く上手いcssの書き方はないかと探しています。
具体的に、ページ見てもらうとわかりやすいのですが、普通
http://www.pictomancer.net/
↑みたいなフッターが、コンテンツが短いと例えば
http://www.pictomancer.net/about/01site.htm
↑みたいに、上手く一番下に来てくれません。

試行錯誤の段階で、フッターのdivに
{position:absolute;bottom:0;}
と指定したこともあります。確かに短いコンテンツでは上手く下に来てくれましたが、
今度は、普通に縦スクロールの入るページで不都合が起こりました。
フッターが、最初に表示される状態の一番下に来てしまい、
スクロールするとコンテンツと一緒に上にあがってしまうのです。

何か、上手いcssの書き方はないでしょうか。
尚、当方javascriptの知識はないので、振り分けしろと言われたらお手上げです。


1:[回答] SPEA [2004/11/16 18:48 ]

<table>の高さを100%で指定して<body>はmargin-botttom:0px;

で、出来ると思います。


2:[回答] SPEA [2004/11/16 18:49 ]

↑のtが一つ多いです(汗
正確にはmargin-bottom:0px;
です。


3:[回答] りゅう [2004/11/17 09:51 ]

ああ、ごめんなさい。書き忘れました。
テーブルは真っ先に考えましたが(そして「出来る」ということも知っているのですが)、なんとかcssだけでレイアウト出来ないものかと模索しています。
丁寧な回答、ありがとうございます>SPEA


4:[回答] PICTOMANCER [2004/11/17 09:53 ]

↑名前間違えました。上は、スレッドスターターのPICTOMANCERです。


5:[完了] PICTOMANCER [2004/11/18 15:08 ]

別サイトの方に解答のヒントを頂いて、自己解決しました。

<style type="text/css"><!--

div.naka {
position:relative;z-index:9;
border:solid 2px #0000ff;/←*見やすくするように入れた*/
background-color:#ffffff;
}

div#footerarea {
position:relative;z-index:8;
height:15px; width:100%;
background-color:transparent;
}

div.sita {position: fixed ; bottom:0;
z-index:0;
height:15px; width:100%;
border:solid 2px #ff0000;/←*見やすくするように入れた*/
background-color:#ffffff;
}
--></style>

<body>

<div class="naka">
本文中身
</div>

<div id="footerarea">
 </div>

<div class="sita">
フッター
</div>


フッターを、ポジションフィックスにして一番下に固定。
で、背景色つけて不透明にしたメインコンテンツをズィンデックスで上に重ねると。
試しに、メインコンテンツの下に「footerarea」と名付けた、フッターと同じ大きさの背景透明のディヴを、ダミーでカマしてみました。
(まだ試してないけど、ダミーのディヴを作らなくても、メインコンテンツにマージン指定してやるだけで大丈夫かも)


素直にテーブル使っとけば、よほど素直で簡単な気もしますが。
同じ疑問を持つかも知れない後続の方のために、
疑問フッた責任で俺流回答を紹介しました。お世話になりました。


6:[完了] PICTOMANCER [2004/11/24 01:02 ]

スミマセン、
まだ飛んで来られる方がいらっしゃいますが、
0:[投稿] で例挙したページは既に修正済みです。
なので、サイトご覧になっても質問の意味がわからないかと思います。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World