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/

Div不是浏览器的100％宽度

4 个答案: