Div 不是瀏覽器的 100% 寬度

Question

我的 div 不會拉伸瀏覽器的整個寬度，它在兩端停止大約 10px。

 .header { position: relative; background-color: #088ed7; width: auto; height: 20px; }

 <div class="header">...</div>

我試過auto和100%但仍然得到相同的結果。

Answer 1

這可能是頁面的邊距和/或填充。

添加：

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

.header {
  margin: 0;
}

 html, body { padding: 0; margin: 0; } .header { margin: 0; position: relative; background-color: #088ed7; width: auto; height: 20px; }

 <div class="header">...</div>

Answer 2

對於我的項目中的許多人，我添加了以下重置 css。 然后，沒有更多的問題 =)

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

Answer 3

添加以下 css 規則：

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

Answer 4

在您的代碼中添加以下 css，新單位“vw”視口寬度用於設置元素到視口的寬度。

 html,body{
    margin:0;
    padding:0;
 }
 .header{
    width:100vw;
 }

更多詳情請參考鏈接： https : //web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/