Html 第二个div won'的背景色；我没有出现

我不熟悉css和html，但了解基本知识。我正在尝试创建一个页面，其中不同div的背景不同。例如，页面的顶部是一个div，其中我有信息和按钮，页面的底部将有许可证信息，就像一个真正的网站可能有，例如“联系我”

我的问题是显示了上分区的背景色，但没有显示下分区的背景色。我已经解决了一段时间的问题，这里的答案似乎不适用于我的问题

这是我的密码： HTML:

我怀疑问题在于背景的长度和宽度，但我不确定该怎么办我觉得我已经尝试了所有的方法。即使当我试图把整个页面的背景设置为800乘800时，它仍然没有显示出来

另外，我不知道如何显示页面的实际外观，但页面顶部是灰色的，底部是白色的，没有绿色背景

---

谢谢你的帮助

只需添加以下css并删除内联css，同时还要注意

这是一个位置测试

您只需在

#Footer

id选择器之后添加

div

元素。 （

#

是CSS文件中的id选择器 )

不管你怎么做，这都是绝对的

相对和绝对的位置性质有一定的联系

#Footer div {
    background-color: green;
}

---

为什么你创建它如此复杂，你可以很容易地通过

flex

获得它。我更新了我的答案并发布了第二个选项以获得相同的布局。但是你能解释一下为什么第二个选项不起作用吗？它对第一个div的工作方式与我对第二个div的工作方式相同，但现在我只更改了底部的一个div，它们都可以工作，这是为什么？当您使用

position

时，div从flow中出来，因此它不会占用其父div的宽度。因此，我为position div指定了宽度。

#Topper {
 background-color: #E0E0E0;
}

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

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

#Footer div {
    background-color: green;
}