DIV 下方不会显示更多内容

Question

我正在尝试在这两条消息下方添加页脚图像。底部是透明的，我在“消息 2”下面添加的任何内容都在后面而不是在它下面，我如何在这些下面继续编辑？

理论上，即使只是添加一些文本，例如

<p>hello</p>

应该出现在下方。它显示在 message 2 div 后面，并且不允许我在下面实际编辑，它在后面进行编辑。我将如何解决这个问题？

<style>
 body {
  display: flex;
  height: 100vh;
  margin: 0;
  flex-direction: column;
}

.message1 {
  flex: 1;
  align-items: center;
  display: flex;
  max-height: 100px;
  background-color: #f0f0f0;
}

.message2 {
  flex: 1;
  align-items: center;
  display: flex;
  max-height: 100px;
  background-color: #3a3a3a;
}
a {
    text-decoration: none;
    color: ##6d1a76;
  }
</style>

<style>
.messagetext {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 20px;
  padding: 0px;
</style>


<div class="message1">

<div class="messagetext">
<p class="Roboto"><a href="URL">URL TEXT</a></p>
</div>

</div>

<div class="message2">

<div class="messagetext">
<font size="3" color="#ffffff">
<p class="Roboto">TEXT</p>
</font>
</div>

<div>
<br>

<style>
.footer {
   position: fixed;
   bottom: 0%;
   width: 100%;
   
}
</style>

<!--Footer-->
<div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
<br>

如果您尝试在其下方添加文本，它只会显示在现有文本旁边，我需要它显示在下方。

Answer 1

您的页脚有position: fixed 和bottom: 0%;，所以它位于页面底部（我给它一个高度并将其背景设置为黄色以使其可见，顺便说一句，页脚DIV 中的src 属性赢得了'不产生图像）。

position: fixed 也将其从文档流的其余部分中取出，因此无论 * 在 * 之后 * 页脚将简单地跟随在页脚 之前 的任何内容。

此外，您的代码中有一些小错误/错别字 - HTML 和 CSS 规则中的未闭合标签。我将其拆分为 CSS 和 HTML，以便在下面的 sn-p 中更清晰

body {
  display: flex;
  height: 100vh;
  margin: 0;
  flex-direction: column;
}

.message1 {
  flex: 1;
  align-items: center;
  display: flex;
  max-height: 100px;
  background-color: #f0f0f0;
}

.message2 {
  flex: 1;
  align-items: center;
  display: flex;
  max-height: 100px;
  background-color: #3a3a3a;
}

a {
  text-decoration: none;
  color: #6d1a76;
}

.messagetext {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 20px;
  padding: 0px;
}

.footer {
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 100px;
  background: #ffffaa;
}

<div class="message1">

  <div class="messagetext">
    <p class="Roboto"><a href="URL">URL TEXT</a></p>
  </div>

</div>

<div class="message2">

  <div class="messagetext">
    <font size="3" color="#ffffff">
      <p class="Roboto">TEXT</p>
    </font>
  </div>



  <!--Footer-->
  <div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
  
  <p>THIS IS BELOW THE FOOTER IN THE HTML CODE, but above it in the document flow</p>