- ベストアンサー
画面の常に一番下に枠を表示させたいのですが
画面の常に一番下（もしくはその少し上）に枠（太い線=tableのようなもの）を表示させたいのですが、 うまくいきません。 下記私の書いた初歩的なcssだと画面の上に ２段で表示されます。 よろしくお願いします。 CSS p.sample1 {background-color: #f8dce0; margin-top: 50px;} p.sample2 {background-color: #f8dce0; margin-bottom: 50px;} html <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if lt IE 7]> <script type="text/javascript" src="fixed.js"></script> <![endif]--> <link rel="stylesheet" href="haikei.css" type="text/css" charset="Shift_JIS"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html> 文字コードなどを設定しました。 それとCSSをUTF-8で保存すると、一部文字化けを起こすことがあるので、shift_jisで保存したほうが良いと思います。 さらにlinkで指定するときに charset="Shift_JIS" の部分でスタイルシートの文字コードを指定してやるようにしましょう。 今度こそ、多分、できると思います。
その他の回答 (6)
- tenderfeel
- ベストアンサー率56% (215/379)
線を画像にして、bodyのbackgroundで位置bottomでrepeat-xするのが断然楽だと思うんですが 質問のソースそのまま使うのであれば、１つ入れ物を増やして <body> <div id="wrapper"> <p class="sample1">#sample1</p> <p class="sample2">#sample2</p> </div> </body> 次のようなCSSで出来ると思います <style> *{ margin:0; padding:0; } body,html{ height:100%; min-height:100%; } #wrapper { height:100%; min-height:100%; background-color:#CCCCCC; position:relative; } p.sample1 { background-color: #f8dce0; position:absolute; bottom:0; height:20px; width:100%; } p.sample2 { background-color: #f8dce0; position:absolute; bottom:20px; height:20px; width:100%; } </style>
保存形式をメモ帳とかでUTF-8にしてませんか？ たしかテキストエディタ等を使ってUTF-8Nにしないと?がでます。 こちらも何度も書き直して申し訳ないのですが、CSS部分は以下の指定だけのほうが良いかもしれません。 p.sample2 { position:fixed; bottom:0; }
補足
重ね重ねすいません。 xyzzyエディタでUTF-8NでCSS&HTMLとも保存し、 ご指摘のように p.sample2 { position:fixed; bottom:0; } と変えても「?」が出てきてしまいいます。
またやってしまった、もう笑うしかない(笑 html>body .sampleになってますね。 html>body .sample2に置き換えてください。
補足
何度もお手数かけてすいません。 一番上の一番左側に「?」が表示されます。 よろしくお願いします。
本当ですね(汗 何度もすみません。 body { position:relative; } p.sample2 { position:absolute; bottom:0; } html>body p.sample { position:fixed; bottom:0; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!--[if lt IE 7]> <script type="text/javascript" src="fixed.js"></script> <![endif]--> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html> 今何通りかためしてみましたが、これでいけると思います。 htmlの最初のほうにDTD宣言というのがあるのですが、これは知っておいても良いかもしれません。 http://www.dspt.net/html_tag/mode.html position:absolute; bottom:0; については、 <p class="sample2">上マージン50px</p> より下に他の要素が入ることを想定してつけているので、もしも何も入らない場合は消してしまってもかまいません。
すみません、ミスってました。 body { position:relative; } p.sample2 { position:absolute; bottom:0; position:fixed; bottom:0; }
補足
すいません。この通りやってもうまくいきません。IEは7.0です。 ご面倒で、すいません。 CSS（haikei.css,同一フォルダーにあります） body { position:relative; } p.sample2 { position:absolute; bottom:0; position:fixed; bottom:0; } --- HTML <html> <head> <link rel="stylesheet" href="haikei.css" type="text/css"> </head> <body> <p class="sample1">上マージン50px</p> <p class="sample2">上マージン50px</p> </body> </html>
画面をスクロールしても常にブラウザの下側に固定するということですか？ もしそうなら body { position:relative; } p { position:absolute; bottom:0; position:fixed; bottom:0; } としてみてください。 ただしie6以下ではposition:fixed;が未対応なので、http://www.doxdesk.com/software/js/fixed.html ここにあるjavascriptを読み込んでください。
お礼
ご丁寧に本当にありがとうございました。 一連のご指摘の通りで出来ました。
お礼
ご丁寧に本当にありがとうございました。 一連のご指摘の通りで出来ました。