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/