css固定したフッターが本文と重なってしまいます

解決済

質問者：ryou1068
質問日時：2005/09/16 01:01
回答数：2件

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#22222
回答日時：2005/12/28 15:30

何度もゴミ回答ばかりしてすみません。

これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
　　<TITLE>Test</TITLE>
　　<STYLE type="text/css">
　　#left {
　　position:absolute;
　　top: 130px;
　　left: 100px;
　　width: 300px;
overflow-y: scroll;
　　}
　　#main {
　　position:absolute;
　　top: 130px;
　　left: 400px;
　　}
　　#right {
　　position:absolute;
　　top: 130px;
　　left: 700px;
　　}
　　#footer {
　　position:absolute;
　　bottom: 0px;
　　left: 100px;
　　}
　　</STYLE>
</HEAD>
<BODY>
<div id="left">
　left<br/>
</div>
<div id="main">
　main
</div>
<div id="right">
　right
</div>
<div id="footer">
　footer
</div>
</BODY>
</HTML>

- 0
- 件

通報する

No.1

回答者： naynay
回答日時：2005/09/25 01:33

固定しているので仕方ないです。

固定は必要なのでしょうか？
ただ左を150px空けたいだけでしたら

body{margin:0; padding:0; text-align:left }
div{ margin:0 0 0 150px; }
#header {height:60px; }
--------------------------------------
<div id="header">
ヘッダ部
</div>
<div>
メインの記事
</div>
<div>
フッター
</div>

こんなんじゃダメですか？
DIVを他に使用する場合はそれぞれIDかクラスを付けてmargin指定でOKです。