ここから本文です

やや至急です HTMLでホームページを作った時に、 どうしてもページの下に余白が...

黒犬さん

2020/1/1317:21:51

やや至急です
HTMLでホームページを作った時に、
どうしてもページの下に余白ができてしまいます。
ページの縦幅を調節することはできますか?

縦スクロールバーのスクロール範囲を制限する方法でも構いません

補足下に余白ができてしまったのは、もともと縦に並んでいたものをずらして横並びにしたからだと思います。
align=”left”を使うと、そのフレームのリンクができなくなってしまいます。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q122187060...
この質問にその時のコードが書いてあります

閲覧数:
34
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

eos********さん

2020/1/1318:11:28

ページの下に余白というものが、どんな状況でおきうる、どんなものなのかが情報不足で分かりませんが、

縦スクロールバーが、画面幅よりも広い状態になっていて、横スクロールバーが表示されるために画面下に、そのスクロールバー分の高さが追加されている状況なのかなと。。

要素であるボックスの幅が横長すぎるのが原因かな?

とすれば、その原因調査からなんですが、英単語などの改行できない長い文字列が横幅を押し出していたり、
横幅の長い画像が表示されていて画面幅を押し出していたりとか。

または、内容物の画像とかは100%以下の幅にしていても、それを入れているボックス自体の幅が画面より広ければ、結局中のものもそれに合わせて横幅が伸びちゃう。


はみ出した内容物を、強制的に目隠ししちゃうスタイルがあります。
http://www.htmq.com/css/overflow.shtml


スクロールバーのいろいろ
https://saruwakakun.com/html-css/basic/overflow
https://www.yoheim.net/blog.php?q=20190801
https://www.tagindex.com/stylesheet/box/overflow2.html



でも、レスポンシブデザインも考慮したら、横幅を強制的に制限するより、内容物が画面幅より狭くなるようにCSSを組み込んだほうが良いかと。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2020/1/18 14:13:59

わかりやすい御解答ありがとうございました。
参考にします!

ベストアンサー以外の回答

1〜1件/1件中

san********さん

2020/1/1319:05:58

>HTMLでホームページを作った時に、
>どうしてもページの下に余白ができてしまいます。

状況がよく分かりませんが

コンテンツ量が少なくてフッターが画面縦位置の中途半端な位置になってしまう
場合の事でしょうか?

この場合対策方の一つに、positionプロパティでstickyを使う方法があります。
この方法はコンテンツ量が多くなるとフッターはそのまま下に押されて縦スクロールが
発生します。

--- HTML---
<body>
<div class="container">
<header>
<h1>header</h1>
</header>
<main>
<h2>main</h2>
<p>main</p>
<p>main</p>
<p>main</p>
<p>main</p>
</main>
</div>
<footer>
<h3>footer</h3>
</footer>
</body>

--- CSS ---
@charset "utf-8";

:root {
--sz: 50px;
}

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
}

body {
min-height: calc(100% - var(--sz));
}

.container {
margin: var(--sz) auto;
width: 80%;
}

header {
padding: 50px 0;
background-color: #deb887;
text-align: center;
}

main {
padding: 50px 0;
background-color: #90ee90;
text-align: center;
}

footer {
margin: 0 auto;
padding: 10px 0;
width: 80%;
background-color: #6495ed;
text-align: center;
position: sticky;
top: 100%;
}

>HTMLでホームページを作った時に、
>どうしてもページの下に余白ができてしまいます。...

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる