ベストアンサー

画面の常に一番下に枠を表示させたいのですが

2008/06/05 13:13

画面の常に一番下（もしくはその少し上）に枠（太い線=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>

idek
お礼率47% (170/361)

CSS
回答数7
ありがとう数3

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

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

ベストアンサー

noname#66720

2008/06/06 09:58 回答No.6

<!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">  <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)

2008/06/06 13:15 回答No.7

線を画像にして、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>

質問者

お礼 2008/06/20 21:00

ご丁寧に本当にありがとうございました。一連のご指摘の通りで出来ました。

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

noname#66720

2008/06/05 18:14 回答No.5

保存形式をメモ帳とかでUTF-8にしてませんか？たしかテキストエディタ等を使ってUTF-8Nにしないと?がでます。こちらも何度も書き直して申し訳ないのですが、CSS部分は以下の指定だけのほうが良いかもしれません。 p.sample2 { position:fixed; bottom:0; }

質問者

補足 2008/06/05 21:45

重ね重ねすいません。 xyzzyエディタでUTF-8NでCSS&HTMLとも保存し、ご指摘のように p.sample2 { position:fixed; bottom:0; } と変えても「?」が出てきてしまいいます。

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

noname#66720

2008/06/05 14:52 回答No.4

またやってしまった、もう笑うしかない(笑 html>body .sampleになってますね。 html>body .sample2に置き換えてください。

質問者

補足 2008/06/05 16:45

何度もお手数かけてすいません。一番上の一番左側に「?」が表示されます。よろしくお願いします。

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

noname#66720

2008/06/05 14:49 回答No.3

本当ですね(汗何度もすみません。 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>  <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> より下に他の要素が入ることを想定してつけているので、もしも何も入らない場合は消してしまってもかまいません。

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

noname#66720

2008/06/05 13:34 回答No.2

すみません、ミスってました。 body { position:relative; } p.sample2 { position:absolute; bottom:0; position:fixed; bottom:0; }

質問者

補足 2008/06/05 14:08

すいません。この通りやってもうまくいきません。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>

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

noname#66720

2008/06/05 13:32 回答No.1

画面をスクロールしても常にブラウザの下側に固定するということですか？もしそうなら body { position:relative; } p { position:absolute; bottom:0; position:fixed; bottom:0; } としてみてください。ただしie6以下ではposition:fixed;が未対応なので、http://www.doxdesk.com/software/js/fixed.html ここにあるjavascriptを読み込んでください。

質問者