第二個div的背景顏色不會顯示

我是新來的CSS和HTML，但知道基礎知識。我正在嘗試創建一個頁面，其中背景對於不同的div來說是不同的。例如，頁面的頂部是一個div，我有信息和按鈕，頁面的底部會有許可信息，比如真實的網站可能會有例如「與我聯繫」。第二個div的背景顏色不會顯示

我的問題是上部div的背景顏色顯示，但較低的div的背景不顯示。我一直在解決問題，現在沒有答案似乎適用於我的問題。

這裏是我的代碼： HTML：

<!DOCType HTML> 
<html> 
    <head> 
     <link rel="stylesheet" href="Styles.css"> 
    </head> 
    <body> 
     <div id = "Topper"> 
      <div style = "height: 500px;width: 800px"> 
       <h1><b>Lets Play a Game</b></h1> 
       <p>blah blah blah</p> 
       <a href="SecondPage.html"> 
        <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;""> 
       </a> 
      </div> 
     </div> 
     <div id= "Footer"> 
      <div style="position: absolute; bottom: 100px;"> 
       <p>This is a test for Location</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

#Topper { 
background-color: #E0E0E0; 
} 

p { 
    width: 500px; 
    border-style: hidden; 
    text-align: justify; 
    word-break: keep-all; 
} 
#Footer { 
    background-color: green; 
}

我懷疑問題出在後臺的長度和寬度，但我不知道該怎麼辦我感覺我已經嘗試了一切。即使當我試圖將整個800頁的背景變成800時，它仍然沒有顯示出來。

Ps。我不知道如何向您展示頁面的實際外觀，但頁面的頂部是灰色的，底部是沒有綠色背景的白色。

感謝您的幫助！

來源

2017-07-11 HoldenMalinchock

爲什麼你創建它非常複雜，你可以很容易地通過'flex'來獲得它。 – LKG

我更新了我的答案併發布了第二個選項以獲得相同的佈局。 – LKG

只需添加以下css並刪除內聯css，並且在最後使用""時還要照顧<a href="SecondPage.html">內聯css。

#Footer { 
    background-color: green; 
    position: absolute; 
    bottom: 100px; 
    width: 100%; /* Added */ 
}

#Topper { 
 
    background-color: #E0E0E0; 
 
} 
 

 
p { 
 
    width: 500px; 
 
    border-style: hidden; 
 
    text-align: justify; 
 
    word-break: keep-all; 
 
} 
 

 
#Footer { 
 
    background-color: green; 
 
    position: absolute; 
 
    bottom: 100px; 
 
    width: 100%; /* Added */ 
 
}

<div id="Topper"> 
 
    <div style="height: 500px;width: 800px"> 
 
    <h1><b>Lets Play a Game</b></h1> 
 
    <p>blah blah blah</p> 
 
    <a href="SecondPage.html"> 
 
     <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div id="Footer"> 
 
    <div> 
 
    <p>This is a test for Location</p> 
 
    </div> 
 
</div>

第二種方法使用flex得到它。

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#Topper { 
 
    background-color: #E0E0E0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height:calc(100vh - 70px); /* 70px is your footer height */ 
 
} 
 

 
#Topper>div { 
 
    flex: 1; 
 
} 
 

 
#Footer>div { 
 
    flex: 1; 
 
} 
 

 
p { 
 
    width: 500px; 
 
    border-style: hidden; 
 
    text-align: justify; 
 
    word-break: keep-all; 
 
} 
 

 
#Footer { 
 
    background-color: green; 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    flex: 1; 
 
}

<div id="Topper"> 
 
    <div> 
 
    <h1><b>Lets Play a Game</b></h1> 
 
    <p>blah blah blah</p> 
 
    <a href="SecondPage.html"> 
 
     <img src="PlayButton.png" alt="Photoshopped Button for later" style="width:190px;height:135px;"> 
 
    </a> 
 
    </div> 
 
</div> 
 
<div id="Footer"> 
 
    <div> 
 
    <p>This is a test for Location</p> 
 
    </div> 
 
</div>

來源

2017-07-11 18:30:55 LKG

真棒作品非常感謝這麼多！ – HoldenMalinchock

但你能解釋爲什麼它不適用於第二個？它爲第一個div工作，就像我爲第二個div做的那樣，但現在我只改變了最下面的一個，他們都爲此工作。 – HoldenMalinchock

當你使用'position'時，div從流出來，所以它不會佔用它的父div的寬度。所以我將寬度分配給位置div。 – LKG

你只需要進行後#Footer ID選擇div元素添加。（#是CSS文件中的id選擇器 class and id selector in css）

但是，您將其設爲絕對。

相對和絕對位置屬性有一些關係。

#Footer div { 
    background-color: green; 
}

來源

2017-07-11 18:56:08

第二個div的背景顏色不會顯示

回答

相關問題