Я пытаюсь сделать фиксированный div вставки относительным div. я создал textarea.comment сделать пользовательский комментарий, но мне это нужно в нижней части conversations DIVСделать фиксированный div в относительном div
Пожалуйста, проверьте мой codepen
Я думаю, что вы ищете, чтобы иметь текстовое поле всегда видно в нижней части чат.
Я бы посоветовал вам не делать этого с фиксированной позицией, так как он перекрывал ваши чат-сообщения.
Я предлагаю вам изменить HTML-разметку из:
<div class="converstion">
// Conversation content
<textarea></textarea>
</div>
к:
<div class="chatwrapper">
<div class="conversation">
// Conversation content
</div>
<textarea></textarea>
</div>
Таким образом, ваш разговор остается прокручивать, но ваш текстовое поле всегда будет в нижней части, не беспокоясь о перекрывающихся.
Пожалуйста, обратите внимание
*,
*: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;
}<div class="main">
<div class="people"> </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>
Фиксированная позиция устанавливается по отношению к документу, насколько я знаю, даже когда вы поместите его в относительной дел. Однако вы можете попробовать абсолютное. Или, может быть, использовать javascript, чтобы он всегда был внизу. – Gacci
Я пытался сделать его абсолютным, но с прокруткой не работает :(@ Gacci –