CSS: 如何让一个元素的背景横跨整个页面？

Question

我开始学习CSS，真的不知道如何处理这个问题。我正在尝试制作一个类似于本页底部黑色条的纯色顶部条。但是，当我尝试这样做时，颜色有点像在文本周围形成一个框，而不是从页面的边框开始。我试着玩 width/height 但没有成功。

谢谢

编辑：

 body { margin:0;}
.
.
.
#bar{
      height: 100%; //these dont do anything
      width: 100%;
   background-color:black;}

<div id=bar>       <h1> <a href="index.html"> <span id=stuff>stuff </span></a>
       <br> <span id=stuff> stuff stuff stuff</span> </h1> 

       <ul>
<li><a href="#stuff">stuff stuff stuff</a></li>
<li><a href="#stuff">stuff stuff stuff</a></li>
<li><a href="#stuff">stuff stuff stuff</a></li>
<li><a href="#stuff">stuff stuff stuff</a></li>
<li><a href="#stuff">stuff stuff stuff</a></li>
<li><a href="#stuff">stuff stuff stuff</a></li>
</ul>

</div>

Answer 1

您是否尝试过将背景图片的宽度和高度设置为 100%？

Answer 2

1) 您应该在该元素上设置 width: 100%; 并确保所有父元素也具有该元素。通过这种方式，元素被告知伸展到页面的整个宽度。 [你可能已经这样做了:)]

2) 此外，确保该元素是块元素或内联块元素（使用 display: inline-block），因此它不会充当普通内联元素（与它的内容需要）。

Answer 3

大多数浏览器都设置了默认页边距，您可以覆盖它们，包括 CSS 中的 body { margin:0; }。

更新：那里有 h1，它也有自己的边距，所以也添加 h1 {margin:0;}。

body { margin: 0 }

#topBar { background: black; color: white; }

<div id=topBar>Top bar</div>

CSS: 如何让一个元素的背景横跨整个页面？

CSS: How to make background of an element stretch across the entire page?

html

css

background