Navbar and "remaining-full-height" container for SPAs
In the last years I wrote several smaller single-page applications (SPAs), mainly for demos and experiments. The typical layout I want for these SPAs is:
- navbar at the top with fixed height
- content-container below the navbar with 100% of the remaining height.
This is what I cam currently using (demo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome SPA</title>
<style>
/* CSS RESET */
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
/* END OF CSS RESET */
/* set explicit height on html => child-elements can use %-based heights*/
html {
height: 100%;
}
/* "body" is the top-level flex container */
body {
height: 100%;
display: flex;
flex-direction: column;
}
/* titlebar is flex "child". For complex cases, make this another container */
.titlebar {
background-color: rgb(37, 37, 37);
color: white;
width: 100%;
height: 4rem;
line-height: 4rem; /* vertically centers text */
padding-left: 4rem;
font-size: 2rem;
font-family: Arial, Helvetica, sans-serif;
}
/* main-container is flex child and at the same time another flex-container
for vertical+horizontal centering */
.main-container {
flex: 1; /* grows main-container to rest of height */
display: flex;
background-color: rgb(40, 40, 80);
align-items: center;
justify-content: center;
}
.main-container > div {
font: 2rem Arial;
width: 100%;
max-width: 600px;
height: 4rem;
line-height: 4rem;
margin: 20px;
background-color:#f1f1f1;
text-align: center;
}
</style>
</head>
<body>
<div class='titlebar'><b>Titlebar</b> ...with subtitle</div>
<div class="main-container">
<div>centered</div>
</div>
</body>
</html>