CSS静态页脚和div浮动问题

Question

我正在使用Bootstrap 4创建一个简单的聊天应用程序，并且在静态页脚方面遇到了困难。邮件被隐藏在页脚后面。如何使消息不会放在输入框/页脚下方？

.content {
    margin-bottom: 100px;
}

.message {
    float: left;
    padding: 10px;
    border-radius: 17px;
    background: #e8e8f8;
    margin: 13px 11px 0 11px;
    clear: both;
}

.my-message {
    float: right;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}

.input-form {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
    <nav class="navbar navbar-dark bg-dark blue fixed-top">
        <span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
    </nav>
    <div class="container" style="padding-top: 85px;">
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
        <div class="message">
            <table>
                <tr><td><b>Other User</b><td></tr>
                <tr><td>Hello.<td></tr>
            </table>
        </div>
        <div class="message my-message">
            <table>
                <tr><td><b>User</b><td></tr>
                <tr><td>Hello!<td></tr>
            </table>
        </div>
    </div>
</div>
<div class="footer">
    <form class="input-form">
        <div>
            Please wait for a user to join ...
        </div>

        <div class="input-group mb-1 px-2">
            <input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
            <div class="input-group-append">
                <button class="btn btn-success" type="submit" id="sendmessage">Send</button>
            </div>
        </div>
    </form>
</div>

Answer 1

问题是您的.messages处于浮动状态，因此您需要在.content容器上清除它们。我添加了一个::after元素进行清除，并在.content容器中添加了填充而不是边距。

.content {
  padding-bottom: 100px;
}

.content::after {
  content: '';
  display: block;
  clear: both;
}

.message {
  float: left;
  padding: 10px;
  border-radius: 17px;
  background: #e8e8f8;
  margin: 13px 11px 0 11px;
  clear: both;
}

.my-message {
  float: right;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  text-align: center;
}

.input-form {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="content">
  <nav class="navbar navbar-dark bg-dark blue fixed-top">
    <span class="navbar-brand mb-0 h1"><img style="margin-top: -5px;" /> Chat</span>
  </nav>
  <div class="container" style="padding-top: 85px;">
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
    <div class="message">
      <table>
        <tr>
          <td><b>Other User</b>
            <td>
        </tr>
        <tr>
          <td>Hello.
            <td>
        </tr>
      </table>
    </div>
    <div class="message my-message">
      <table>
        <tr>
          <td><b>User</b>
            <td>
        </tr>
        <tr>
          <td>Hello!
            <td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div class="footer">
  <form class="input-form">
    <div>
      Please wait for a user to join ...
    </div>

    <div class="input-group mb-1 px-2">
      <input type="text" class="form-control" id="message" name="message" placeholder="Type your message" required>
      <div class="input-group-append">
        <button class="btn btn-success" type="submit" id="sendmessage">Send</button>
      </div>
    </div>
  </form>
</div>