css固定要素の垂直方向の位置を調整する

Question

チャット用のテキストボックスの配置に問題があります。 1つの特定の解像度にしか見えないようにすることができます。他の画面サイズではひどく見えます。どのようにすべての解像度（> 1360px）のテキストボックスの位置を、下部の小さなダークグレー領域に収まるように調整できますか？ある解像度で調整しようとすると、他の解像度ではうまく見えません。

https://jsfiddle.net/4pvfwz11/1/

<div class="chatdiv hidden-xs hidden-sm col-lg-2 col-md-3 pull-right" data-spy="affix"> 
<div class="scrollbar" id="style-2"> 
    <div class="force-overflow"></div> 
    <ol class="chat"> 
     <div id="fullchat"> 
      <li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li> 
     </div> 
     <div class="chat_error"></div> 
    </ol> 
</div> 
<div class="toggle-sound"></div> 
    <input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/> 

<style type="text/css"> 

div.chat_error { 
    color: #e20f0f; 
    padding-left: 10px; 
    padding-top: 1rem; 
} 

.chatdiv 
{ 
    position: fixed; 
    left: 40px; 
    background-color: #101010; 
    height: 90vh; 
} 

.chatdiv .name{ 
    top: 3px; 
    left: 110px; 
    font-size: 10px; 
    font-weight: bold; 
    color: rgba(256,256,256,0.80); 
    cursor: default; 
} 

/* M E S S A G E S */ 

.chat { 
    list-style: none; 
    background: none; 
    margin: 0; 
    padding: 0 0 50px 0; 
    margin-top: 60px; 
    margin-bottom: 10px; 
} 
.chat li { 
    padding: 0.5rem; 
    overflow: hidden; 
    display: flex; 
} 

.chat .avatar img { 
    margin-top: 15px; 
    width: 40px; 
    height: 40px; 
    border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    background-color: rgba(255,255,255,0.9); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

.other .msg { 
    order: 1; 
    border-top-left-radius: 0px; 
    box-shadow: -1px 2px 0px #187006; 
    margin-left: 10px; 
    background-color: #27af0c; 
} 

.self { 
    justify-content: flex-end; 
    align-items: flex-end; 
} 
.self .msg { 
    order: 1; 
    border-bottom-right-radius: 0px; 
    background-color: #0a95db; 
    box-shadow: 1px 2px 0px #055f8c; 
    margin-left: 10px; 
} 

.bot .msg { 
    order: 1; 
    border-bottom-right-radius: 0px; 
    background-color: #a50808; 
    box-shadow: 1px 2px 0px #6b0606; 
    margin-left: 10px; 
} 

.msg { 
    background: white; 
    min-width: 50px; 
    padding: 10px; 
    border-radius: 2px; 
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07); 
} 
.msg p { 
    font-size: 15px; 
    margin: 0 0 0.2rem 0; 
    color: white; 
} 

.msg time { 
    font-size: 10px; 
    color: #ccc; 
    margin-top: 3px; 
    float: right; 
    cursor: default; 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
} 

/* T Y P E */ 

input.textarea { 
    position: absolute; 
    width: 89%; 
    height: 50px; 
    left: 15px; 
    bottom: 3vh; 
    background: white; 
    border: none; 
    outline: none; 
    padding-left: 10px; 
    padding-right: 10px; 
    color: #666; 
    font-weight: 400; 
} 

div.toggle-sound { 
    position: fixed; 
    bottom: 13vh; 
    left: 65px; 
    font-weight: bold; 
    font-size: 20px; 
} 

.scrollbar 
{ 
    float: left; 
    height: 80vh; 
    background-color: #232323; 
    overflow-y: scroll; 
    margin-bottom: 25px; 
    width: 100%; 
} 

.force-overflow 
{ 
    min-height: 90vh; 
} 

#style-2::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #232323; 
} 

#style-2::-webkit-scrollbar 
{ 
    width: 12px; 
    background-color: #232323; 
} 

#style-2::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #E20F0F; 
} 
</style> 

Answer 1

あなたはさまざまな画面サイズごとに異なるCSSをしたい場合は、メディアクエリと呼ばれるものを使用することができます。さまざまな画面サイズでどのようなルールを変更したいのか正確には分かりませんが、簡単な例を考えてみましょう。 900px以下の幅のスクリーン上で、テキストボックスの背景色を赤にしたいとしましょう。これは、次のメディアクエリを使用して行うことができます。

@media (max-width: 900px) { 
    input.textarea { 
    background-color: red; 
    } 
} 

それでは、あなたにできることは、単にCSSを使用して、さまざまな画面サイズにやりたいし、それらのすべてのメディアクエリを作成変更するかを理解することです。メディアクエリhereについて詳しく読むことができます。