Odtnhj

I am trying to create the User Interface of a side chat with a fixed position. My issue is that the height of each section (the header of the chat, the main body, and the input field) are not in perspective and proportion. How do I use percentages to make them align in a way that when the page is resized, it will adjust to it?

My HTML Code:

<div id="chatContainer" class="chatContainer">
 <div class="chatWrapper">
 <div class="chatHeader">
 <a href="javascript:void(0)" class="chatCloseBtn" onclick="closeChat()">✖</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>

Javascript with the Chat Box:

<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>

Styling of Chat Box:

.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);

Working JSFiddle: http://jsfiddle.net/z5t9pj8r/

I need the chat look in proportion with no overlapping of elements if I was to change the height of the actual page. I think the text may need to change from px to vh or % or something to be in proportion too. Im not too sure when making everything in proportion to each other. Any help is appriciated.

codepen.io

function openChat() 
 document.getElementById("chatContainer").style.display = "block";


function closeChat() 
 document.getElementById("chatContainer").style.display = "none";

.chatContainer 
 display: none;
 width: 100vw;
 height: 100vh;
 position: fixed;
 z-index: 1;
 left: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.8);
 transition: 0.5s;
 box-sizing: border-box;


@media only screen and (min-width: 1200px) 
 .chatContainer 
 max-width: calc(100vw / 3);
 height: 100%;
 


.chatWrapper 
 position: relative;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column;


.chatHeader 
 display: flex;
 flex-wrap: wrap;
 border-bottom: 2px solid DarkOrange;
 padding: 20px;
 box-sizing: border-box;
 min-height: 115px;


.chatCloseBtn 
 order: 2;
 font-family: BurbankBigCondensed-Black;
 color: white;
 font-size: 24px;
 text-decoration: none;
 transition: all 0.20s linear;
 margin-left: auto;


.chatCloseBtn:hover 
 color: rgba(255, 255, 255, 0.6);


.chatTitle 
 order: 1;
 flex-grow: 1;
 margin: 0;
 color: white;
 font-family: BurbankBigCondensed-Black;
 font-size: 24px;
 max-width: 90%;


.chatSubText 
 order: 3;
 font-size: 18px;
 color: #BEBEBE;
 width: 100%;
 margin: 0;
 padding: 10px 0;


.chatBreak 
 color: DarkOrange;
 background-color: #ee7600;
 width: 100%;
 border: none;
 height: 2px;


.chatBox 
 padding: 20px;
 overflow-y: scroll;
 border-top: 2px solid grey;
 border-bottom: 2px solid grey;
 flex-grow: 1;
 box-sizing: border-box;


.chatInputBox 
 width: 100%;
 padding: 20px;
 box-sizing: border-box;
 background: rgba(0, 0, 0, 0.3);
 border: none;
 border-top: 2px solid DarkOrange;
 border-bottom: 2px solid DarkOrange;
 font-size: 18px;
 color: white;
 resize: none;

<button onclick="openChat()">Open Chat</button>

<section id="chatContainer" class="chatContainer">
 <div class="chatWrapper">
 
 <header class="chatHeader">
 <a href="javascript:void(0)" class="chatCloseBtn" onclick="closeChat()">✖</a>
 <h1 class="chatTitle">
 FortniteProSnipes Public Chat
 </h1>
 <p class="chatSubText">
 This is a general chat for all members of FortniteProSnipes
 </p>
 </header>
 
 <div class="chatBox">
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 trgr: grtgrt<br> 
 trgr: grtgrt<br>
 trgr: grtgrt<br>
 </div>
 
 <textarea class="chatInputBox" name="chat-message"></textarea>
 </div>
</section>