Предотвращение совмещения нижнего колонтитула с поплавком

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 элементов

.

Как мне избежать этого?

Answer 1

проверьте это: css grid - очень хорошее свойство css.
, мы можем разделить экран на количество столбцов и строк. Я использовал здесь CSS-сетки.

для получения дополнительной информации о css-grid читайте
https://css -tricks.com / snippets / css / complete-guide-grid /

ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display:grid;
      grid-template-columns:33% 33% 34%;
  
    }

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

    .him {
      grid-column:1/3;
      border: 1px solid #000000;
    }

    .me {
    grid-column:2/4
      
    }

    #footer {
      height: 30px;
      position: fixed;
      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>

Answer 2

Из-за того, что padding-bottom не может быть применено здесь, мой ответ не уместился в этом случае, поэтому я провел исследование по альтернативам для предложенного расположения сетки и, что удивительно, для позиционирования fixedблок нижнего колонтитула.

В этом примере я решил оставить код без <ul>, который имеет довольно большой список значений css элемента по умолчанию . Я предположил, что первое сообщение всегда приходит от пользователя, и использовал :not() CSS-селектор для стилизации блоков ответов. Вы можете изменить .user и :not(user) на любые классы, такие как .me и .him в соответствии с вашим HTML.

section {display:flex;flex-direction:column}

section * {
  width: 75%;
  border: 1px solid #757575;
  border-radius:20px;
  padding:2px 10px;
  margin-bottom:2px
}

.user {
  background:#ccc;
  margin-left: auto
}

section :not(.user) {
  background:#eee
}

section :not(.user) + .user, .user + :not(.user) {
  margin-top:5px
} 

footer { 
  height: 30px;
  position: sticky; /* Yes. It works now */
  bottom: 0;
  background: #000;
  color: white;
  text-align: center; 
  line-height: 28px
}

<section>
      <div class="user">Need some help with HTML</div>
      <div class="user">And CSS maybe</div>
      <div class="user">Want it to work with long-lenth messages as well, you know. And in all the browsers, even IE...</div>
      <div>Sure</div>
      <div>Lets test this one</div>
      <div>Quite a good in terms of browser support in 2019</div>
      <div class="user">Awsome!</div>
      <div class="user">Thank you so much</div>
      <div>You are welcome</div>
      <div class="user">Goodbye</div>
</section>

<footer>
<p>Sticky Footer</p>
</footer>