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%;，所以它位于页面的底部（我给它一个高度并使其背景为黄色以使其可见，BTW页脚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>

Answer 2

你错过了一个关闭div并且更好地将flex项放在他们自己的容器中：

body {
  height: 100vh;
  margin: 0;
}

.container {
  display: flex;
  height: 200px;
  flex-direction: column;
}

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

.message2 {
  flex: 1;
  align-items: center;
  display: flex;
  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%;
}

<div class="container">
  <div class="message1">

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

  </div>

  <div class="message2">

    <div class="messagetext">
        <p class="Roboto">TEXT</p>
    </div>

  </div>
</div>
<br>
  <p>lorem</p>


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