Position div in flexbox aligned layout - html

Question

Below is the layout, I have used the following styles to push the footer to the bottom, it is very important the footer is anchored to the bottom:
.body {
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex: 1 0 auto;
}
I have then used the following styles to try and position the login form vertically between the banner and the footer but is not quite right. The same layout is used by multiple forms of varying heights.
The login-layout__positioner class is my attempt to position it vertically:
.login-layout__positioner {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0%;
left: 0;
right: 0;
bottom: 0;
}
How can I vertically align the form between the banner and the footer which takes into account different heights for the middle form?
html, body, #global__root, .global__main-content {
height: 100%;
}
.login-layout__positioner {
display: -ms-flexbox;
display: flex;
align-items: center;
position: absolute;
top: -6.5%;
left: 0;
right: 0;
bottom: 0;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
color: #fff;
background-color: #0065bd;
}
.banner__top {
padding-top: 22px;
}
.login-layout__container {
background-color: inherit;
width: 100%;
}
wrapper {
max-width: 750px;
margin: 0 auto;
padding: 0 15px;
}
.login-layout__positioner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.login-layout__form {
padding-left: 0;
}
.medium--eight-twelfths {
width: 66.666%;
}
.login-layout__inner__container {
padding: 0px 30px 30px;
}
.footer__footer {
text-align: left;
color: #fff;
}
.footer__footer {
padding-top: 48px;
padding-bottom: 48px;
}
.footer__footer {
font-size: 19px;
}
.footer__footer {
background-color: #0065bd;
margin-top: 48px;
text-align: center;
font-weight: 700;
font-size: 16px;
padding-top: 16px;
padding-bottom: 16px;
text-align: center;
}
.footer__footer ul {
list-style: none;
margin-left: 0;
}
.footer__footer a,
.footer__footer a:hover,
.footer__footer a:focus,
.footer__footer a:active {
outline: 0;
color: #fff;
}
<div class="app-layout__body">
<div class="wrapper login-layout__container">
<div class="banner__container">
<div class="wrapper banner__top">
<div class="grid">
<div class="grid__item large--one-third banner__grid-item-left">logo</div>
<div class="grid__item large--two-thirds ">
<h2 class="banner__heading-right"> </h2>
</div>
</div>
</div>
</div>
<div class="grid login-layout__positioner">
<div class="grid__item medium--two-thirds login-layout__form">
<div class="login-layout__inner__container">
<div class="grid">
<div class="grid__item ">
<h2 class="">Sign In</h2>
</div>
</div>
<form>
<div>
<div class="grid">
<div class="grid__item ">
<div class="form-group form-control__input">
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div class="input-wrapper">
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
</div>
</div>
</div>
<div class="grid">
<div class="grid__item ">
<div class="form-group form-control__input">
<label for="password" id="password-label" class="label__default label__strong label__double-margin">Password</label>
<div class="input-wrapper ">
<input type="password" autocomplete="off" class="input__default form-control" id="password" name="password" value="">
</div>
</div>
</div>
</div>
<div class="grid login__button__container">
<div class="grid__item large--two-thirds "><a tabindex="0" href="/business/forgotten-password">Forgotten your password?</a></div>
<div class="grid__item medium--one-third ">
<button class="button__default button__primary" type="submit">LOGIN</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer__footer">
<div class="wrapper">
<div class="grid">
<div class="grid__item ">
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>

Answer 1

Sorry, I had to remove about 80% of your div tree because I just couldn't wrap my head around so much stuff.
Here's a simple column layout with a header, a footer and a centered form.
html, body {margin:0}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer {
min-height: 20vh;
background: blue;
color: white;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
footer ul li a {
color: white;
}
form {
border: green dashed 2px;
}
<div class="app-layout__body">
<header>
<div class="grid__item large--one-third banner__grid-item-left">logo</div>
</header>
<form>
<h2>Sign in</h2>
<p>Email</p>
<input>
<p>Password</p>
<input>
<button>Login</button>
</form>
<footer class="footer__footer">
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</footer>
</div>