• ベストアンサー

CSSを使い、ページの一番下に文字列を表示する方法

CSSを使い、ページの一番下に文字列を表示する方法 過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。 よろしければ教えてください。 外部のCSSファイルに .comment { position : absolute;bottom:5px; font-size:11px; color: black; width: 740px; } と書き込み、 HTML内で <div class="comment">一番下に表示したい文字</div> としました。 すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。 必ずページの一番下に表示するにはどうすれば良いでしょうか。 （JavaScriptとテーブルを使わない方法でお願いします） よろしくお願いします。

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

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

  • ベストアンサー
  • ao_
  • ベストアンサー率33% (15/45)
回答No.3

ページの一番下とはbody要素ですか？ もしbodyの子に全体をくくるdivがあるなら、そのdivにposition:relativeを追加してみてください。

954khz
質問者

お礼

<div style="position:relative;top:5px;"> でくくることにより解決できました。 ありがとうございます。

その他の回答 (2)

  • m035
  • ベストアンサー率44% (38/86)
回答No.2

<div style="position:absolute;"> <div class="comment" style="position:absolute;bottom:5px;font-size:11px;color:black;width:740px;">一番下に表示したい文字</div> 本文 </div> のように全体を<div　style="position:absolute;">～</div>で囲んでその中に入れてみると言うのはどうですか？

954khz
質問者

お礼

<div style="position:relative;top:5px;"> でくくることにより解決できました。 ありがとうございます。

  • m035
  • ベストアンサー率44% (38/86)
回答No.1

.comment { position:absolute; bottom:5px; font-size:11px; color:black; width:740px; } でだめでしょうか？ <div class="comment" style="position:absolute;bottom:5px;font-size:11px;color:black;width:740px;">一番下に表示したい文字</div> でテストしたところ問題はありませんでしたが・・・

954khz
質問者

補足

<body> から</body>までの間が短い場合はちゃんと表示されます。 <body>間が長く、右側にスクロールバーが表示されている状態だと、 "現在表示しているところ"の一番下に文字列が出てしまいます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでcopyright(一番下に表示)

    CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。 <div class="menu"> ... </div> <div class="main"> .... </div> ページは↑のような構成になっていて(absoluteで位置指定しています)、 .copy { bottom : 10px ; position : absolute ; } のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。 ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？

    • 締切済み
    • CSS
  • CSSで背景を多重化する方法

    CSSでdivの中の背景を多重化したいと思いまして、 なんとかお知恵を拝借できればと思い投稿させていただきました。 やりたいことは、添付の画像のように、テキストの量によって背景の●がちゃんと下に動いて欲しいのです。 こんな感じでできるかなと思って試行錯誤していましたが、ぜんぜんできませんでした。 【html】 <div class="parent"> <div class="bg_upper"> <div class="bg_lower"> <div class="content"> テキスト・・・ </div> </div> </div> </div> 【CSS】 div.parent { position:relative; } div.bg_upper { position:absolute; top:0; left:0; background:url(../images/bg_tl.png) left top no-repeat; } div.bg_lower { position:absolute; bottom:0; right:0; background:url(../images/bg_br.png) right bottom no-repeat; } <div class="content">に対して、height:100pxのように明示的に高さを指定してやるとそれらしくは なったのですが、高さは可変なので使えませんでした。 なんとかヒントいただけましたら助かります。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでページ作成、Firefoxでうまく表示できません

    ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header">　ヘッダー　</div> <div class="left">　メニュー　</div> <div class="right">　内容　</div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • cssで擬似フレームについて

    はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> 　（ width="700"のコンテンツを作りスクロールさせていま） 　</div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } 　 #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; }　 #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; }　 このような感じなのですがなにかいい方法があればご教授お願いいたします。

    • ベストアンサー
    • HTML
  • CSSのdivで、ページ全体をセンタリング出来ない

    質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!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=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか？ 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • ｃｓｓで見出しの両側に文字を表示したい

    ｃｓｓ+ｈｔｍｌでWebページを作成しています。 その中で見出し(H3タグ)の両側に、右寄せ左寄せで文字を表示したいのです。 （完成イメージは画像参照）。 ソース全文載せましたが、見出しの下に右寄せと左寄せの文字が、表示されてしまいます。 見出しの両側に表示させるにはどうしたらよいですか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <STYLE TYPE="TEXT/CSS"> <!-- div.heading { width: 450px; background-color: #e0e0e0; border: #e0e0c0 solid; border-width: 1px 1px 2px; margin-left: auto; margin-right: auto; } /* --- 見出し --- */ div.heading h3 { margin: 0; padding: 7px 7px 4px; border-bottom: 4px #9825e1 solid; font-size: 100%; line-height: 100%; text-align: center; } span { float: left; width: 100px; text-align: center; } span.back { float: left; } span.next { float: right; } }--> </STYLE> </head> <body> <!--全体(wrapper) Start--> <div class="all-wrapper"> <div class="main-wrapper"> <div class="heading"> <h3>見出し</h3> <span class="back"><a href="#">BACK</a></span><span class="next"><a href="#">NEXT<aa></span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 画像の上に文字をのせ、ボックス全体にリンクを設定したい　CSS&HTM

    画像の上に文字をのせ、ボックス全体にリンクを設定したい　CSS&HTML お世話になっております。 ある画像の上にposition:rerative;を使って文字をのせています。 この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか？ 下記ソースです。 /*css*/ img.button{/*画像*/ margin:0px 0px 8px; padding:2px; border:#999999 1px solid; } .text{/*画像上の文字*/ margin:0px; padding:0px; font-size:14px; text-align:left; } <!--html--> <div style="position:relative;"> <a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a> <div style="position:absolute; left: 24px; top: 13px; width: 217px;"> <p class="text">画像上の文字</p> </div></div> 検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか？うまくいきませんでした。 お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。 表現の仕方や言葉の使い方を間違っていたらすみません…。

    • ベストアンサー
    • HTML
  • 色の付いたboxに文字を上下等間隔に並べたいのですが、何かスマートな方法はないでしょうか？

    * { margin: 0px; padding: 0px; } .box { width: 100px; background-color: #eeeeee; padding: 10px 10px 0px 10px; } .text { margin-bottom: 10px; } <div class="box"> <p class="text">あああ</p> <p class="text">いいい</p> </div> 色の付いたboxに文字を上下等間隔に並べたいのですが、何かスマートな方法はないでしょうか？ IEでの表示が理想なのですが、Firefoxでは下のpaddingが無くなります。 boxのwidthがあるかないかが引き金のIEのバグということは分かりました。 boxに「padding-bottom: 1px;」で直りましたが、何故こうなるか意味がわかりません。 皆様はこういう時どのようにしていますか？

    • ベストアンサー
    • HTML
  • [CSS]　常にフッターは下部に表示　IE7

    常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> 　　　<div id="container"> 　　　　　<div id="main"><p>内容</p></div> 　　　　　<div id="footer">Copyright</div> 　　　</div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する