Scroll div in-between 2 static divs - html

Question

I am trying to make a game terminal; I want to have two bars one on the top and one in the bottom and between those a scroll div needs to go to display text.
I tried doing it myself and got this as a result:
https://gyazo.com/0f98fd10e72f8ce104148b7cf51d861a
As you can see: the input field (which needs to be all the way at the bottom) and the text goes behind it and a little on.
This is how it should look:
https://gyazo.com/dbe572d83a6d00c1f45b5f1696fd4636
Code:
<div style="width: 100%; height: 100%; position: relative;">
<div style="background: #4C3C33; width:100%; color: #FFFFFF;">
<span id="gameTerminal_statusIcon">
<span class="fa fa-circle" style="color: red; width: 16px; height: 16px;">
</span>
</span>
<span id="gameTerminal_status"> Live</span>
</div>
<div class="well-md" id="gameTerminal" style="overflow-x: hidden; background: #2A211C; height: 100%; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace;">
<p>
<span id="gameTerminal_content" style="color:#80FF80; width: 100%;">
<!--game terminal content goes here-->
</span>
<style>
.gameTerminal_content_outputLine:nth-of-type(odd) {
width: 100%; background: #44362E;
}
.gameTerminal_content_outputLine {
display: inline-block;
}
</style>
<script>showLoading('gameTerminal_content', '32', 'html', '');</script>
</p>
<div id="gameTerminal_scrollHeigth"></div>
</div>
<form action="#" method="POST" onsubmit="gameTerminal_executeCommand(); return false;">
<input
type="text"
name="gameTerminal_input"
style="background: #4C3C33; width:100%; color: #FFFFFF; border: 0; outline: 0; bottom: 0px; position: absolute;"
placeholder="Type your command here..."
autocomplete="off"
/>
</form>
</div>
Thanks in advance

Answer 1

You can use Flexbox and just add overflow-y: scroll on div that you want to have scrollbar.
* {
box-sizing: border-box;
}
.content {
display: flex;
flex-direction: column;
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
flex: 1;
overflow-y: scroll;
}
input {
width: 100%;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>
You can also use calc() instead of Flexbox for height
* {
box-sizing: border-box;
}
.content {
border: 1px solid black;
height: 150px;
width: 80%;
margin: 0 auto;
}
.top {
height: calc(100% - 20px);
overflow-y: scroll;
}
input {
width: 100%;
height: 20px;
}
.box {
color: #60965C;
min-height: 30px;
line-height: 30px;
}
.box:nth-child(2n+2) {
background: #2A211C;
}
.box:nth-child(2n+1) {
background: #44362E;
}
<div class="content">
<div class="top">
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor.</div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis sit consectetur ad. Eius, nam! Officia soluta incidunt obcaecati provident vero at praesentium impedit, repellat, accusamus tenetur rem eius id quisquam.</div>
</div>
<div class="bottom">
<input type="text" placeholder="Enter text here">
</div>
</div>