html - 如何将文本区域固定到滚动 div 中的屏幕底部

Question

需要将 textarea 固定到可滚动的 div 底部，但不像我尝试将 position: fixed 固定到底部。

如果您有一个网格布局，其中有一组滚动文本，您如何在底部设置文本区域。我试过 position: fixed; 并且它拉伸(stretch)了整个屏幕的宽度。我需要 textarea 直接放在左侧的 div 中。当我在滚动文本 div 中使用 position: relative 并在 textarea 中使用 position: absolute; 时，它会将 textarea 放在底部屏幕，但当我滚动时它不会停留在那里。

这是我目前拥有的: https://codepen.io/anon/pen/QMMjow

这就是我想要的，但是像上面一样把它固定在底部: https://codepen.io/anon/pen/OjjMVK

Answer 1

您可以通过添加另一个与 textarea 平行的元素并使 textarea 位于第一个 div 的底部来实现。

.messages{
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
}
.message{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.textarea{
  width: 100%;
  height: 50px;
  position: absolute;
  bottom: 0; left: 0;
  resize: none;
  background: red;
}

<div class="messages">
  <div class="message">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="textarea"></div>
</div>