- ベストアンサー
ページ下端の空白問題と解決方法
- ページ下端に空白ができる原因と解決方法について解説します。
- CSSの指定や要素の配置により、ページ下端に空白ができてしまう問題が発生することがあります。解決方法としては、要素のマージンやパディング、表示位置の指定を調整することが重要です。
- 具体的には、body要素や要素内のテキストに設定されているマージンやパディングを0にすることで解決できます。また、要素の表示位置を絶対位置やフレックスボックスを利用して調整する方法もあります。
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もっとも大事なこと・・・デザイン目的にHTMLを書いたら絶対にダメです。!!HTML4.01が勧告された1999年以来・・。 divやidのclass名も文書構造を示すようなものを・・ 「id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ・・・HTML5の「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」とその説明が良いヒントになるでしょう。 ページの最下段ということは、ウィンドウの最下端と言う意味ではないですよね。なら <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>ページの下端に空白ができます。なぜかわかりません。 </h2> ＿＿<p>ページの最下端に接するように背景色を表示したいですが、画像のように、空白ができてしまいます。</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<address>・・・・</address> ＿＿<p>この・・・</p> ＿</div> </body> の場合、スタイルシートは body{background-color:white;} div.footer{background-color:red;} だけでよいはずです。 わかりやすいように、htmlに背景色を指定すると html{background-color:silver;} ※原因は <div><p>・・・・</p><div> と閉じられていないため、ブラウザが |-- div | |--p |-- div と判断するからです。
お礼
回答ありがとうございます。 すみません、 <div>は</div>の間違いです。
- naokita
- ベストアンサー率57% (1008/1745)
高さが無いって話じゃ無ければ、 pは段落だからマージンあり p.fontshitei { margin-bottom:0; } もうひとつ <div class="shita"><p class="fontshitei">テキスト</p><div> 閉じる <div class="shita"><p class="fontshitei">テキスト</p></div>
お礼
ありがとうございます。 </div>になってなかったですね。 打ち間違いでした。すみません。
- outbrave
- ベストアンサー率60% (231/380)
div.shita の下に何もなくて、ページが縦に短い場合ですね。 div.shita が縦長になってもいいのですよね。 div.shita の下には、 body が表示されているので body にその色（赤）を指定して、上のメインとなる部分に白色を指定するようにします。
お礼
回答ありがとうございます。 body { ～以降を上に持ってきてみたのですが、 うまくいきませんでした。 bodyの色の指定を変えて挑戦してみます。
お礼
回答ありがとうございます。 <span>、inlineの使い方を知らないので、調べて挑戦してみます。