css調整固定元素的垂直定位

Question

我在爲我的聊天定位文本框時遇到了麻煩。我只能讓它看起來好一個特定的決議。在其他屏幕尺寸，它看起來很糟糕。如何調整所有分辨率（> 1360像素）的文本框的位置以適應底部的小黑暗區域。當我嘗試調整一個分辨率時，在其他分辨率上看起來不太好。

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。