Fill Entire View of Page with CSS/Flexbox - html

Question

Height still confuses me and when and where to put it.
https://jsfiddle.net/3pxmm0mz/
<div id="app">
<div className="wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div className="main-wrapper">
<main>
main
</main>
<footer>
footer
</footer>
</div>
</div>
</div>
body,
html {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
header {
background: red;
flex: 0 0 100%;
}
nav {
background: blue;
flex: 0 0 5%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
main {
background: yellow;
flex: 0 0 100%;
}
footer {
background: darkorange;
flex: 0 0 100%;
}
}
}
What I am trying to achieve is that the all the areas will fill the entire screen(without scroll bars).
I would like the header to be max-25%. Footer probably 25% (though I am still not sure if I want the footer always shown).
If the either the nav and maybe main content should have scroll bars once the content goes over a screen size.

Answer 1

why not pass that 100vh to the children and set the height as percentage as you like.
body, html {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
header {
background: red;
flex: 0 0 100%;
max-height:25%;
height:25%;
}
nav {
background: blue;
flex: 0 0 5%;
height:75%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
height:75%;
}
main {
background: yellow;
flex: 0 0 100%;
height:75%;
overflow-y: auto;
}
footer {
background: darkorange;
flex: 0 0 100%;
height:25%;
max-height:25%;
}
<div id="app">
<div class="wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div class="main-wrapper">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>
footer
</footer>
</div>
</div>
</div>

Answer 2

https://jsfiddle.net/3pxmm0mz/1/
body,
html {
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
flex-wrap: wrap;
header {
background: red;
flex: 0 0 100%;
height: 100px;
}
nav {
background: blue;
flex: 0 0 5%;
}
.main-wrapper {
background: gray;
display: flex;
flex: 0 0 95%;
flex-wrap: wrap;
main {
background: yellow;
flex: 0 0 100%;
min-height: calc(100vh - 200px);
overflow: auto;
}
}
footer {
background: darkorange;
flex: 0 0 100%;
height: 100px;
}
}
<div id="app">
<div class="wrapper">
<header>Header</header>
<nav>
Nav
</nav>
<div class="main-wrapper">
<main>
main
</main>
</div>
<footer>
footer
</footer>
</div>
</div>
You can adjust the calc() to subtract a percentage or a fixed amount of pixels depending on what you go for.

Answer 3

I see that you are using CSS Flexbox flex and flex-wrap to create a full-screen 2-dimensional layout, but the flexbox module is fundamentally intended to guide the display of specific, discrete on-page elements here and there throughout the page.
Ideally, in this setup, you can - and maybe should - be using CSS Grid.
This will give you all sorts of flexibility - not to mention simplicity - which you won't have access to, via flexbox.
Working Example:
#app {
display: grid;
grid-template-rows: 25% 50% 25%;
grid-template-columns: 10% 90%;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
header {
grid-area: 1 / 1 / 2 / 3;
background-color: red;
}
nav {
grid-area: 2 / 1 / 3 / 2;
background-color: blue;
}
main {
grid-area: 2 / 2 / 3 / 3;
background-color: yellow;
}
footer {
grid-area: 3 / 1 / 4 / 3;
background-color: darkorange;
}
<div id="app">
<header>Header</header>
<nav>Nav</nav>
<main>main</main>
<footer>footer</footer>
</div>