第二个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的背景颜色不会显示

回答

相关问题