防止与底部的固定形式重叠

Question

我正在构建一个消息页面，其页面底部有一个典型的固定形式。

消息是动态生成的，并放在<li>标记中。

这是HTML：

<ul id="messages" style="overflow:auto;">
   <!-- Messages are dynamically added as <li> here -->
</ul>

<form  action="">
       <input id="m" autocomplete="off"/>
       <button type="submit" name="action">Send</button> 
</form>

这是CSS：

form {padding: 20px; position: fixed; bottom: 0; width: 80%; }
form input {color: black; border: 0; padding: 10px; width: 90%; margin-right: .5%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }

动态添加的消息会溢出在固定在底部的表单顶部。

我想只允许消息显示在表单之前，然后变为可滚动。

以下是当前情况：

我怎样才能做到这一点？

Answer 1

默认情况下，表单具有透明背景。在这种情况下，您可以做一些简单的事情：

form {
  padding: 20px; 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background: red;
}

https://jsfiddle.net/f3ukjyce/

但是，有更好的方法来构建它。问题是你总是会在表单后面隐藏几条消息。您需要对此进行重做，以便滚动的内容包含在其自身的元素中，并且不会与表单重叠。

https://jsfiddle.net/f3ukjyce/1/

Answer 2

尝试使用flexbox布局，我在<div id="container">和<ul>周围添加了<form>。

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#messages {
  overflow: auto;
}
form {
  margin-top: auto;
}

<强> jsFiddle

如果您希望消息从下到上增长，可以添加:before伪元素。

#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container:before {
  content: "";
  flex: 1;
}
#messages {
  overflow: auto;
}

<强> jsFiddle