CSS：如何使元素的背景延伸到整個頁面？

Question

我開始學習CSS，但真的不知道如何處理這個問題。 我正在嘗試使純色頂部欄類似於此頁面底部的黑色欄。 但是，當我嘗試執行此操作時，顏色排序會在文本周圍形成一個框，而不是從頁面邊界移開。 我嘗試用寬度/高度玩游戲沒有成功。

謝謝

編輯：

 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）另外，請確保該元素是block元素或inline-block元素（帶有display: inline-block ），因此它不充當普通的inline元素（其大小將與其內容所需的大小一樣）。

Answer 3

大多數瀏覽器都設置了默認邊距，您可以覆蓋它們，包括body { margin:0; } body { margin:0; } 。

更新：您已經有了h1，它也有自己的邊距，因此也要添加h1 {margin:0;} 。

 body { margin: 0 } #topBar { background: black; color: white; } 

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