5

我的 div 不会拉伸浏览器的整个宽度，它会在两端短约 10 像素。

.header {
  position: relative;
  background-color: #088ed7;
  width: auto;
  height: 20px;
}
<div class="header">...</div>

我都试过了auto，100%但仍然得到相同的结果。

4

4 回答 4

17

这可能是页面的边距和/或填充。

添加：

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>

于 2013-10-04T15:10:28.163 回答
1

对于我的项目中的许多人，我正在添加以下重置 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;
}
于 2013-10-04T15:14:13.627 回答
1

添加以下CSS规则：

body {
    margin:0px;
    padding:0px;
}
于 2013-10-04T15:14:53.410 回答
0

在您的代码中添加以下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/

于 2016-11-10T07:53:18.623 回答