- ベストアンサー
css固定したフッターが本文と重なってしまいます
#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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
何度もゴミ回答ばかりしてすみません。これが最後です。 メインの記事とフッターの重なりは、一応、防げました。 しかし、スクロールバーが操作できません。中途半端です。 益子貴寛氏の調査では、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)
固定しているので仕方ないです。固定は必要なのでしょうか？ ただ左を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です。
