Hi there GYM,
I just used the basic full page layout that jason provided some while ago.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Flex full page</title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<header>
<h1>Site Title</h1>
</header>
<main>
<p>Lorem ipsum</p>
</main>
<footer>
<p>footer</p>
</footer>
</body>
</html>
screen.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
background-color: #f0f0f0;
font: normal 1em / 1.5em sans-serif;
}
body {
display: flex;
flex-direction: column;
}
body > header,
body > footer {
flex: 0 0 auto;
padding: 1em;
background-color: #ace;
}
body > header {
border-bottom: 1px solid #999;
}
body > footer {
border-top: 1px solid #999;
}
main {
flex: 1 0 auto;
padding: 1em;
background-color: #def;
}
coothead