7

100%Web サイトにヘッダーを追加しようとしましたが、幅がまたはに設定されているにもかかわらず、コンテナーを画面の全幅に合わせることができませんauto。マージンとパディングの両方が 0 に設定されていても、常に左右に約 5 ピクセルのマージンがあります。

HTML:

<div id="header">
    <h7>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
    </h7>
</div>

CSS:

body div#header{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}
4

7 に答える 7

17

追加

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

あなたのCSSに。

ブラウザーは、Web サイトをレンダリングするときにデフォルトのマージンやパディングを配置します。これを使えば回避できます。

于 2012-07-31T21:55:29.233 に答える
2 
body, html {
    margin: 0;
    padding: 0;
}

div { width: 100%;
    margin: 0;
    padding: 0;
    background-color: #c0c0c0;
}

また

html, body, div {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    background:transparent;
}
于 2012-07-31T22:07:51.740 に答える
1

これは、親によってパディングされているためです。別のdivに含まれていますか？または、ドキュメントの本文にパディング/マージンプロパティが設定されている可能性がありますか？完全なCSSを提供してください。そうでない場合は、ブラウザが追加しているため、次のように明示的に設定してください。

body {
    margin: 0;
    padding: 0;
}
于 2012-07-31T21:58:18.517 に答える
0

CSSのbody/htmlタグにゼロマージンを設定します。それが役立つかどうかを確認してください。

于 2012-07-31T21:57:59.370 に答える
0

次のようなリセットを追加する必要があります。

html, body, div {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

すべてのブラウザにはデフォルトのスタイルシートがあります。リセットでオーバーライドする必要があります。

于 2012-07-31T21:58:01.357 に答える
0

これを試してください、これが役立つことを願っています:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Header & Footer</title>
        <style type="text/css">
            /* Global */
            * {
                margin: 0;
            }
            html, body {
                height: 99%;
            }
            /* Header */
            .container{
                min-height: 100%;
                height: auto !important;
                height: 100%;
                margin: 0 auto -4em;
                width:100%;
                font-family:Segoe UI;
                color:#fff;
            }
            .container-header{
                padding-top:5px;
                padding-left:20px;
            }

            /* Footer */
            .footer{
                background-color:#333030;
                width:100%;
                font-family:Segoe UI;
                color:#fff;
            }
            .footer img{
                padding-left:15px;
            }
            /* Page Content */
            .content{
                height: auto !important;
            }
            .container p{
            font-size:12pt;
            font-weight:bold;
            }
        </style>
    </head>
    <body>
        <!-- Header Div -->
        <div class="container">
            <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                <tr></tr>
                <tr>
                    <td></td>
                    <td>
                        <div style="padding-left:100px;font-size:36px;">Header</div>
                    </td>
                </tr>
                <tr></tr>
            </table>

            <!-- Page Content Div -->
            <div class="content">
                Blah Blah
            </div>
        </div>

        <!-- Footer Div -->
        <div class="footer">
            <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
                <tr></tr>
                <tr>
                    <td></td>
                    <td>
                        <div style="padding-left:100px;font-size:36px;">Footer</div>
                    </td>
                </tr>
                <tr></tr>
            </table>
        </div>
    </body>
</html>
于 2012-08-01T09:40:26.587 に答える