If you are looking to create a simple one dimensional array layout for your website, consider using CSS flex
.
html,
body {
min-height: 100%;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: #eee;
flex: 0 0 50px;
}
main {
background: #aaa;
flex: 1;
}
footer {
background: #888;
flex: 0 0 100px;
}
<div class="container">
<header>
HEAD
</header>
<main>
BODY
</main>
<footer>
FOOT
</footer>
</div>
For a more complex two dimensional array layout that includes sidebars, I suggest utilizing CSS grid
.
Check out this HOLY GRAIL EXAMPLE:
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
header {
background: #eee;
grid-area: header;
}
nav {
background: #888;
grid-area: nav;
}
main {
background: #aaa;
grid-area: content;
}
aside {
background: #888;
grid-area: side;
}
footer {
background: #bbb;
grid-area: footer;
}
<div class="container">
<header>
HEAD
</header>
<nav>
NAV
</nav>
<main>
BODY
</main>
<aside>
SIDE
</aside>
<footer>
FOOT
</footer>
</div>