CSSを使い、ページの一番下に文字列を表示する方法
過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。
よろしければ教えてください。
外部のCSSファイルに
.comment {
position : absolute;bottom:5px;
font-size:11px;
color: black;
width: 740px;
}
と書き込み、
HTML内で
<div class="comment">一番下に表示したい文字</div>
としました。
すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。
必ずページの一番下に表示するにはどうすれば良いでしょうか。
(JavaScriptとテーブルを使わない方法でお願いします)
よろしくお願いします。
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>で囲んでその中に入れてみると言うのはどうですか?
<div style="position:relative;top:5px;">
でくくることにより解決できました。
ありがとうございます。
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>
でテストしたところ問題はありませんでしたが・・・
この回答への補足
<body>
から</body>までの間が短い場合はちゃんと表示されます。
<body>間が長く、右側にスクロールバーが表示されている状態だと、
"現在表示しているところ"の一番下に文字列が出てしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSSで画像を同じ位置に重なり合...
-
画像内リンクについて
-
CSSがなぜかfont-sizeだけ効か...
-
CSSで背景色を下まで表示させたい
-
定義リストに下線をつけたいと...
-
z-indexで上になっている要素だ...
-
CSS:animation開始位置の設定
-
IEだとdivが横に並びません
-
画像と一緒にスライドするリン...
-
divの入れ子が上手くいきません。
-
htmlでのfloatを解除すると 親...
-
セル内のリンク文字を中央に配...
-
widthやheightの数値に単位(px...
-
Safariで、Textareaのボーダー...
-
CSSで左に画像、右にテキストを...
-
ul/liタグでのリスト表示におけ...
-
レスポンシブコードの意味なの...
-
CSS(0の単位)について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
form input テキストを上下中央...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
表示倍率を変えるとレイアウト...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
【HTML】【CSS】【Swiper】 元...
おすすめ情報