使相对div中的固定div成为可能

Question

我试图修复div插入相对div。我创建了textarea.comment以使用户发表评论，但我需要在conversations div的底部

请查看我的codepen

Answer 1

我认为你要找的是让textarea始终在聊天的底部可见。

我建议你不要这样做，因为它会与你的聊天消息重叠。

我建议您更改HTML标记：

<div class="converstion">
  // Conversation content
  <textarea></textarea>
</div>

为：

<div class="chatwrapper">
  <div class="conversation">
    // Conversation content
  </div>
  <textarea></textarea>
</div>

这样你的对话仍然可以滚动，但你的textarea总是在底部而不用担心重叠。

Answer 2

请看一下

＆＃13;

＆＃13;

*,
*:before,
*:after {
  font-size: 14px;
  box-sizing: border-box;
  font-family: sans-serif;
}
html,
body {
  position: relative;
}
.main {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
}
.people,
.conversation {
  float: left;
  height: 100%;
  position: relative;
}
.people {
  background: #f1f1f1;
  width: 50px;
}
.conversation {
  width: 250px;
}
.conversation-list {
  height: calc(100% - 80px);
  padding: 20px;
  margin: 0;
  position: relative;
  list-style: none;
  overflow-y: scroll;
}
.conversation-list > li {
  height: 100px;
  padding: 10px;
}
.write-message {
  display: block;
  width: 100%;
  height: 80px;
}

＆＃13;

<div class="main">
  <div class="people">&nbsp;</div>
  <div class="conversation">
    <ul class="conversation-list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
    <textarea class="write-message" placeholder="Write your message"></textarea>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;