固定divを相対divに作成

Question

固定divを相対divに挿入しようとしています。私は、ユーザーのコメントを作るためにtextarea.commentを作成したが、私は私のcodepen

Answer 1

を確認してくださいconversationsのdiv

の底にそれを必要とする私は、あなたが探していることの底に常にテキストエリアを持つことが見えていると思いますチャット。

あなたのチャットメッセージと重複するので、私はあなたがその位置を固定しないように勧めます。

は、私はあなたからのHTMLマークアップを変更することをお勧め：

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

に：

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

そうすれば、あなたの会話がスクロール可能なままですが、あなたのテキストエリアはいつもの重複を気にすることなく、一番下になります。

Answer 2

あなたは相対的な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">&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>