3 row layout in CSS - html

Question

I need to get 3 row layout in HTML + CSS in my Angular.js app.
It should work like this:
My problem is when I resize my middle div get onto my top bar.
Here's some of my code:
.top-pos {
&.small {
padding-bottom: 130px;
}
&.big {
padding-bottom: 170px;
}
}
.bottom-pos {
bottom: 10px;
right: 0;
width: 100%;
position: absolute;
}
.middle {
#include align(vertical);
width: 100%;
}
HTML
<div class="top-pos small">
<div class="position-container">
<div class="top">
<h1 class="title">Some title</h1>
</div>
<div class="middle">
<input type="text" />
<input type="text" />
</div>
</div>
</div>
<div class="bottom-pos">
<button class="submit">Search</button>
</div>
Generally the top bar div should be always on top of the page, the bottom bar should be ALWAYS on bottom and the middle should be always on the middle between top and bottom bar. And the scrollbar should appear when all the elements are like on the second picture.

Answer 1

If older browser support is not an issue you could use css3 flex box to achieve something like this (not exact replica of the images):
#container{
display:flex;
flex-flow:column;
justify-content:space-around;
align-items:center;
width:50%;
height:100%;
}
#container div {
width:90%;
color:#fff;
background:black;
}
#top,#bottom{
height:50px;
}
#middle{
height:100px;
}
Demo

Answer 2

I have created a Fiddle which uses media queries to solve your problem. Hope that helps
CSS:
#media (min-width:400px) {
.top,.middle{
margin-bottom:20px
}
}
#media (max-width:399px) {
.top,.middle{
margin-bottom:2px;
}
h1{
margin:0;
}
}

Answer 3

For creating grid-like layouts that respond to window size changes, you should really consider Bootstrap. It allows you to very easily define layouts that are responsive to the window size. It also really nicely works together with Angular, since Angular defined directives that replace the Javascript part of Bootstrap. However, if you are only interested in the Grid layout part of Bootstrap, you do not need any Javascript at all, since it is all defined in CSS. See this link for more info on the Grid layout of Bootstrap:
http://getbootstrap.com/examples/grid/