防止页脚与float重叠

Question

我创建了一个气泡对话html。现在，我试图在其中添加页脚。（[https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer中的类似代码）

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  clear: both;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 2px;
  width: 80%;
  background: #eee;
}

.him {
  float: left;
  border: 1px solid #000000;
}

.me {
  float: right;
}

#footer {
  height: 30px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

body {
  padding-bottom: 30px;
}

<div>
  <div>
    <ul>
      <li class="me">N-19</li>
      <li class="me">N-18</li>
      <li class="him">N-17</li>
      <li class="me">N-16</li>
      <li class="me">N-15</li>
      <li class="me">N-14</li>
      <li class="him">N-13</li>
      <li class="me">N-12</li>
      <li class="me">N-11</li>
      <li class="me">N-10</li>
      <li class="me">N-9</li>
      <li class="me">N-8</li>
      <li class="him">N-7</li>
      <li class="me">N-6</li>
      <li class="me">N-5</li>
      <li class="me">N-4</li>
      <li class="me">N-3</li>
      <li class="me">N-2</li>
      <li class="me">N-1</li>
      <li class="him">N</li>
    </ul>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

但是我没有看到对话的最后几句。问题在于，由于

元素的float属性，页脚与它们重叠。

如何避免？

我创建了一个气泡对话html。现在，我试图在其中添加页脚。 （在https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer中提供类似的代码）ul {list -...

Answer 1

检查此内容：css grid是css的很好的属性。我们可以将屏幕分为列数和行数。我在这里使用CSS网格。

Answer 2

解决方案很简单-使用:last-child CSS pseudo-class创建与页脚高度相同大小的填充。将此部分添加到您的样式中以进行快速修复：