css - Div が幅の 100% に及ばないのはなぜですか?

Question

本当にばかげた質問があります。

ウェブページの幅の 100% の div スパンを作成しようとしていますが、到達しません。動的にしたい (幅を px で指定しない) ため、水平スクロールバーを表示させたくありません。

Stack Overflow のページ幅 100% の「アラート」に似たものを作ろうとしています。これは、新しいバッジを獲得したときに通知します。

私のサイトのスクリーンショット: 私のサイトのスクリーンショット。ピンクのバナーと緑のバナーが、空色の背景が表示されている場所にギャップを残していることに注意してください。

ピンクのバナー div のコード

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

score 7 · Accepted Answer

HTML bodyタグには、パディングまたはマージンcssが含まれている場合があります。それらをゼロ(0) に設定する必要があります。それが役立つことを願っています。

score 4 · Accepted Answer

体にパディングがあるように見えます。これにより、div が完全に拡張できなくなります。

score 2 · Accepted Answer

css ファイルで、本文にパディングがないことを確認します。何も持っていない場合は、これを追加してみてください：

body {
    padding: 0;
    margin: 0;
}

score 1 · Accepted Answer

タイプ

body {
    min-height:100%;
    height:auto;
    margin:0;
    padding:0;
}

CSS ファイルの先頭に .

score 1 · Accepted Answer

本文の css を追加して、パディングとマージンを削除するだけです。

body {
padding: 0px;
margin: 0px;
}

また、上下左右の余白のみに適用することもできます。

body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}

score 1 · Accepted Answer

実はとても簡単です。ピンクのバナー div の親コンテナーのパディングとマージンが 0 であることを確認してください。この場合、ピンクのバナーのコンテナーは body タグのみであると想定しています。次に、ページの head セクション内に次のスニペットをコピーします。

<style type="text/css">
    body
    {
        margin:0px;
        padding:0px;
        }
</style>

ピンクのバナーの html も正しくありません。交換

<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
  &nbsp;
</div>

と

<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
  &nbsp;
</div>

score 0 · Accepted Answer

A 私がいつも入力する各 CSS ドキュメントの冒頭:

html, body {
    padding: 0;
    margin: 0;
}

不要な外側のマージンやそのコードのパディングに問題はありません。

8 に答える 8