Flex Box Grid container / Ionic full screen View Css - css

Question

After reading a lot of article, tutorials and so many other things, I'm stuck with something that makes me crazy.
Here is what I'm trying to do with flex container:
Picture Css flexbox grid here
I think I have missed something with flex grid. It's impossible for me to have correct CSS to get this picture to render.
Can you help me with a little something just for the beginning?

Answer 1

I confess I do not know the Ionic framework but here' how it can be done using flexbox.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.page {
height: 100%;
width: 80%;
margin: auto;
border: 2px solid black;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-image: url(http://lorempixel.com/output/people-q-c-1000-600-9.jpg);
background-repeat: no-repeat;
background-size: cover;
}
main {
flex-basis: 80%;
border: 2px solid red;
display: flex;
flex-direction: column;
margin: 5px;
}
main .item {
flex-grow: 1;
border: 2px solid gold;
margin: 5px;
}
footer {
flex-basis: 20%;
display: flex;
flex-direction: row;
border: 2px solid red;
margin: 5px;
}
footer .item {
flex-grow: 1;
border: 2px solid grey;
margin: 5px;
}
<div class="page">
<main>
<div class="item"></div>
<div class="item"></div>
</main>
<footer>
<div class="item"></div>
<div class="item"></div>
</footer>
</div>

Answer 2

Thank you for your answer. With your flex css and ionic framework here is what i have :
preview here : ionic strange behavior
Thank you very for this help, I appreciate :-)
.scroll {
height: 100%;
}
.page {
height: 100%;
width: 100%;
margin: auto;
border: 2px solid black;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-image: url(http://lorempixel.com/output/people-q-c-1000-600-9.jpg);
background-repeat: no-repeat;
background-size: cover;
}
main {
flex-basis: 80%;
border: 2px solid red;
display: flex;
flex-direction: column;
margin: 5px;
}
main .item {
flex-grow: 1;
border: 2px solid gold;
margin: 5px;
}
footer {
flex-basis: 20%;
display: flex;
flex-direction: row;
border: 2px solid red;
margin: 5px;
}
footer .item {
flex-grow: 1;
border: 2px solid grey;
margin: 5px;
}
<ion-view title="Accueil" hide-nav-bar="true">
<ion-content scroll="false" >
<ion-content>
<div class="page">
<main>
<div class="item"></div>
<div class="item"></div>
</main>
<footer>
<div class="item"></div>
<div class="item"></div>
</footer>
</div>
</ion-content>
</ion-content>
</ion-view>