Question

我是css和html的新手但知道基础知识。我正在尝试创建一个页面，其中背景对于不同的div是不同的。例如，页面的顶部是一个div，我有信息和按钮，页面的底部部分将有许可证信息，例如真实的网站可能有＃34;联系我＆＃34;。

我的问题是显示上部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，它仍然没有显示。

聚苯乙烯。我不知道如何向你展示页面的实际外观，但页面顶部是灰色的，底部只是白色而没有绿色背景。

感谢您的帮助！

Answer 1

只需添加以下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>

Answer 2

您只需要在div id选择器之后添加#Footer元素。（#是CSS文件中的id选择器 class and id selector in css）

然而你这是绝对的。

相对和绝对的位置属性有一些关系。

#Footer div {
    background-color: green;
}

背景颜色第二个div不会出现

2 个答案: