Javascript 使用百分比分别对齐所有元素的HTML、CSS聊天框

我正在尝试创建一个固定位置的侧边聊天的用户界面。我的问题是，每个部分的高度（聊天标题、主体和输入字段）都不符合透视图和比例。我如何使用百分比使它们对齐，以便在调整页面大小时，页面将进行调整

我的HTML代码：

<div id="chatContainer" class="chatContainer">
    <div class="chatWrapper">
        <div class="chatHeader">
            <a href="javascript:void(0)" class="chatCloseBtn" onclick="closeChat()">&#10006;</a>
            <div class="chatTitle">FortniteProSnipes Public Chat</div>
            <div class="chatSubText">This is a general chat for all members of FortniteProSnipes</div>
        </div>
        <div class="chatBox">
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>
            trgr: grtgrt<br>        
            trgr: grtgrt<br>
            trgr: grtgrt<br>
        </div></div>
        <input type="text" class="chatInputBox" name="chat-message" />
    </div>
</div>

工作区：

如果要更改实际页面的高度，我需要聊天室的外观与元素的重叠成比例。我认为文本可能需要从px更改为vh或%或其他比例。我不太确定什么时候使每件事都成比例。欢迎提供任何帮助。

函数openChat（）{ document.getElementById（“chatContainer”）.style.display=“block”； } 函数closeChat（）{ document.getElementById（“chatContainer”）.style.display=“无”； }

.chatContainer{
显示：无；
宽度：100vw；
高度：100vh；
位置：固定；
z指数：1；
左：0；
底部：0；
背景色：rgba（0,0,0,0.8）；
过渡：0.5s；
框大小：边框框；
}
@仅介质屏幕和（最小宽度：1200px）{
.聊天室{
最大宽度：计算值（100vw/3）；
身高：100%；
}
}
.chatWrapper{
位置：相对位置；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.chatHeader{
显示器：flex；
柔性包装：包装；
边框底部：2倍实心暗色；
填充：20px；
框大小：边框框；
最小高度：115px；
}
.chatCloseBtn{
顺序：2；
字体系列：黑色；
颜色：白色；
字体大小：24px；
文字装饰：无；
过渡：所有0.20秒线性；
左边距：自动；
}
.chatCloseBtn:悬停{
颜色：rgba（255，255，255，0.6）；
}
.聊天室{
顺序：1；
柔性生长：1；
保证金：0；
颜色：白色；
字体系列：黑色；
字体大小：24px；
最大宽度：90%；
}
.潜台词{
顺序：3；
字号：18px；
颜色：#BEBEBE；
宽度：100%；
保证金：0；
填充：10px0；
}
查特布雷克先生{
颜色：暗红色；
背景色：#ee7600；
宽度：100%；
边界：无；
高度：2倍；
}
.聊天室{
填充：20px；
溢出y：滚动；
边框顶部：2倍纯色灰色；
底边：2倍纯色灰色；
柔性生长：1；
框大小：边框框；
}
.chatInputBox{
宽度：100%；
填充：20px；
框大小：边框框；
背景：rgba（0,0,0,0.3）；
边界：无；
边框顶部：2件纯色达克朗格；
边框底部：2倍实心暗色；
字号：18px；
颜色：白色；
调整大小：无；
}

打开聊天室
FortniteProSnipes公共聊天

这是FortniteProSnipes所有成员的常规聊天

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

trgr:grtgrt

查看端口单元

<script>
function openNav() {
    if(window.innerHeight > window.innerWidth) {
        // Mobile friendly section
        document.getElementById("chatContainer").style.width = "100%";
    } else {
        document.getElementById("chatContainer").style.width = "450px";
    }
}

function closeChat() {
    document.getElementById("chatContainer").style.width = "0";
}
</script>

.chatHeader {
    height: 20%;
    border-bottom: 2px solid DarkOrange;
}
.chatContainer {
    height: calc(100vh - 92px);
    width: 0;
    position: fixed;
    z-index: 1;
    top: 92px;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    overflow-x: hidden;
    transition: 0.5s;
    white-space: nowrap;
}
.chatWrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.chatBreak {
    color: DarkOrange;
    background-color: #ee7600;
    width: 100%;
    border: none;
    height: 2px;
}
.chatTitle {
    color: white;
    font-family: BurbankBigCondensed-Black;
    font-size: 24px;
    padding-left: 20px;
    padding-right: 20px;
}
.chatCloseBtn {
    font-family: BurbankBigCondensed-Black;
    color: white;
    font-size: 24px;
    position: absolute;
    right: 20px;
    transition: all 0.20s linear;
}
.chatCloseBtn:hover {
    color: rgba(255,255,255,0.6);
}
.chatBox {
    padding: 20px;
    overflow-y: scroll;
    border-top: 2px solid grey;
    border-bottom: 2px solid grey;
    min-height: calc(75% - 42px);
}
.chatSubText {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    color: #BEBEBE;
    font-family: BurbankBigCondensed-Black;
}
.chatInputBox {
    position: absolute;
    bottom: 0;
    width: calc(100% - 20px);
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-top: 2px solid DarkOrange;
    border-bottom: 2px solid DarkOrange;
    font-size: 18px;
    color: white;
    min-height: calc(5% - 4px);
}