ベストアンサー

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

2005/09/16 01:01

#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指定を使えば同じような効果は得られますが、テーブルの無いレイアウトをやってみたかったので。同じような質問は発見したのですが、いい解答が見つかりませんでした。

ryou1068
お礼率63% (24/38)

HTML
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#22222

2005/12/28 15:30 回答No.2

何度もゴミ回答ばかりしてすみません。これが最後です。メインの記事とフッターの重なりは、一応、防げました。しかし、スクロールバーが操作できません。中途半端です。益子貴寛氏の調査では、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>

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

naynay
ベストアンサー率16% (1/6)

2005/09/25 01:33 回答No.1

固定しているので仕方ないです。固定は必要なのでしょうか？ただ左を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です。

ログインすると、全ての回答が全文表示されます。