為什么我的頁腳中沒有顯示背景？

Question

所以我給了我的頁腳背景顏色，但它沒有顯示出來，所以我想知道正確的代碼是什么？ 這是我的 html 代碼：

 .footer { background-color: #D4D4D4; }

 <div style="background-color: #d4d4d4;"> <footer style="background-color: #d4d4d4;"> <div style="position:relative;background-color:#d4d4d4" class="footer"> <div style="position: absolute; left:1%"> <p style="font-size: 10pt;"><img src='images/DBA LOGO.png ' width="30" height="30" align="left" style="display: inline-block;">DIGITAL BUCKET COMPANY</p> </div> <div style="position: absolute; left:20%"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> <div style="position: absolute; left:50%"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> <div style="position: absolute; left:80%"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> </div> </footer> </div>

這是它的樣子：

我還希望圖像和文本對齊。

Answer 1

您的頁腳不占用任何空間，因為其中的所有內容都是絕對定位的（這意味着該元素已從文檔的正常流程中刪除）。 我會讓頁腳彎曲，然后刪除絕對定位：

 .footer { background-color: #D4D4D4; display: flex; }.logo { width: 20%; }.column { width: 27%; }

 <div style="background-color: #d4d4d4;"> <footer style="background-color: #d4d4d4;"> <div style="position:relative;background-color:#d4d4d4" class="footer"> <div class="logo"> <p style="font-size: 10pt;"><img src='images/DBA LOGO.png ' width="30" height="30" align="left" style="display: inline-block;">DIGITAL BUCKET COMPANY</p> </div> <div class="column"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> <div class="column"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> <div class="column"> <h3>Pages</h3> <p>Link</p> <p>Link</p> <p>Link</p> <p>Link</p> </div> </div> </footer> </div>

Answer 2

當你制作一個 div 絕對值的 position 時，它會從頁面的正常流程中移除，所以父級不知道自己的大小，所以你必須手動定義大小。你的頁腳 class 應該是這樣的：

.footer {
  background-color: #D4D4D4;
  width: 100%;
  height: 200px
}