Question

需要将textarea修复到可滚动的div的底部，但不要像我尝试将position: fixed固定到底部时那样将textarea溢出div。

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

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

这就是我想要的，但是如上所述将它固定在底部： https://codepen.io/anon/pen/OjjMVK

Answer 1

你可以通过添加另一个与textarea平行的元素并将textarea放到第一个div的底部来实现。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何在滚动div中将textarea修复到屏幕底部

1 个答案: