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>

Answer 2

您也可以尝试使用flex：

.content {
margin-bottom: 100px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-self: flex-start;
flex-direction: column;
}
.message {
padding: 10px;
border-radius: 17px;
background: #e8e8f8;
margin: 13px 11px 0 11px;
}
.my-message {
align-self: flex-end;
}
.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>