html - DIV 下方将不再显示任何内容

Question

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

理论上甚至只添加一些像

这样的文本

<p>hello</p>

应该出现在下面。它显示在消息 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，以便在下面的代码片段中更清晰

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>