css-使背景跨越页面？

Question

我正在尝试制作一个跨越页面的标题。

我查看了整个互联网并尝试了他们所说的有效，但没有。至少对我来说。

这就是我得到的：

这是我的代码：

/* USEFUL STUFF
green colour #1(like the .BigTitle): #00CC00
cream colour: #FFFFCC
*/
body{
  background-color:#FFFFCC;
}
.BigTitle{
  background-color: #00CC00;
  width: 100%;
  text-align: center;
}

<div class="BigTitle"><h1>Loriem Ipsum</h1></div>
<div class="sidebar">
  <ul>
    <b>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
    </b>
  </ul>
</div>
<div class="what">
  <h1>Lorium Ipsum</h1>
  <p>Bacon ipsum dolor amet fugiat t-bone kevin prosciutto. Duis biltong filet mignon shankle bacon ground round, commodo salami do. Ex qui pastrami cow, aute anim alcatra. Jerky sausage ullamco tail, aliquip et nostrud excepteur beef ad cupidatat sint filet mignon chicken.</p>
  <p>Turducken meatloaf ham hock nulla meatball. Ullamco qui officia quis filet mignon fugiat. Flank irure pig, sausage consectetur shoulder ea incididunt. Aliqua eu kielbasa andouille aute mollit prosciutto enim shankle rump irure. Bresaola consectetur aute, laboris beef short loin dolore. Incididunt sed labore ad fatback, voluptate dolore mollit ea pancetta tongue.</p>
  <p>Lorem esse kevin dolor jowl eiusmod shoulder deserunt kielbasa swine nisi et pancetta sunt ribeye. Est aliqua flank dolore dolor pork chop turducken in ex. Fugiat shank pork belly jowl id, irure turducken pork loin pork velit laborum tri-tip. Tenderloin ribeye proident nulla hamburger irure mollit short ribs ball tip pastrami. Pork chicken ex pastrami.</p>
  <p>Nulla tempor pork chicken in ullamco eiusmod consectetur ut. Venison beef ribs drumstick, shank in tenderloin dolor. Boudin aute proident sed, cow deserunt tongue sirloin porchetta aliquip dolor dolore aliqua chicken. Alcatra ham laboris pig aute landjaeger in occaecat anim consectetur tempor. Brisket nostrud commodo magna reprehenderit, ribeye nisi pancetta esse qui. Ex hamburger quis, leberkas meatloaf turkey shoulder sint filet mignon picanha nulla sirloin.</p>
  <p>Veniam adipisicing meatloaf, esse lorem doner andouille sirloin est chuck ad pariatur. Aliqua enim ham labore brisket leberkas. Drumstick id tri-tip, fugiat sint bresaola aliqua hamburger ullamco pig anim chicken cow aliquip boudin. Cillum venison non, picanha incididunt esse ex bresaola andouille irure anim jerky. Dolor corned beef leberkas, velit voluptate pork loin sunt pork pariatur.</p>
</div>

Answer 1

在你的 CSS 正文中显式设置 { margin: 0px }

Answer 2

这是工作的DEMO

您需要在CSS 中操作margin 属性

Answer 3

有很多方法可以实现您所需要的。 最简单的就是设置

body {
    margin: 0;
}

但是这样，您在内容中的文本将从页面的最边缘开始。因此，您还需要对文本内容本身或其包装应用一些边距或填充。

另一种方法是重新定义标题的填充和边距，使其超过正文的边距。您需要做的就是像这样编辑您的 .BigTitle 类：

.BigTitle{
    background-color: #00CC00;
    width: 100%;

    padding-left: 8px;
    margin-left: -8px;
    padding-right: 8px;
    margin-right: -8px;
}

这取决于你选择什么方式。

Answer 4

来自CSS Reset：

如果您不知道，每个浏览器都有自己的默认用户 代理的样式表，它用来使无样式的网站看起来更多 易读。例如，大多数浏览器默认将链接设为蓝色， 访问过的链接紫色，给表格一定数量的边框和 填充，将可变字体大小应用于 H1、H2、H3 等和某个 几乎所有东西的填充量。

由于您没有重置 CSS，因此您正在让浏览器的默认样式规则干扰您的样式规则。

您可以使用 CSS 重置来解决您的问题，或者简单地将 margin: 0; 应用于 body 元素。

body {
  background-color: #FFFFCC;
  margin: 0;
}