Question

我试图让我的标题全宽，但我不知道为什么它不起作用，高是完美但我不知道错误是什么宽度，如果你能帮助我，我将不胜感激，这就是我的尝试：

#header {
  width:100%;
 -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  padding-bottom: 9%;
  background-repeat: no-repeat;}

谢谢。

Answer 1

我为您制作了一个演示并更正了您的代码。请检查以下链接：https://jsfiddle.net/djmayank/qsmpbs9d/

HTML：

<div id= "header">

</div>

CSS：

body {
    margin: 0;
}

#header {
  background-color: red;
  height:5px;
  width:100%;
 -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  padding-bottom: 9%;
  background-repeat: no-repeat;}

希望它有所帮助。

Answer 2

您的浏览器很可能会在项目中添加默认的css，这会为事物和其他内容添加填充/边距。我通常将resets放在我的css文件的顶部，它会清除所有默认的css。许多人使用的流行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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

全宽标题

2 个答案: