Skip to content

Instantly share code, notes, and snippets.

@andybrackley
Created February 1, 2020 21:29
Show Gist options
  • Save andybrackley/be42ef6081e7b361055da43307e1e1d5 to your computer and use it in GitHub Desktop.
Save andybrackley/be42ef6081e7b361055da43307e1e1d5 to your computer and use it in GitHub Desktop.
Web Page with Header and Footer. The Main Content fills the remaining space
<!DOCTYPE html>
<head>
<!-- Layouts -->
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header, footer {
flex: none;
}
main {
flex: auto;
}
#mainContent {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.fixed-topleft {
position: sticky;
top: 0px;
left: 0px;
width: 100%;
}
.fixed-bottomleft {
position: sticky;
bottom: 0px;
left: 0px;
width: 100%;
}
</style>
<!-- Styles -->
<style type="text/css">
#headerContent {
height: 40px;
background-color: blue;
}
#mainContent {
background-color: cyan;
}
#footerContent {
height: 40px;
background-color: cornflowerblue;
}
</style>
<title>Test HTML</title>
</head>
<body>
<header>
<div id="headerContent">Header</div>
</header>
<main>
<div id="mainContent">
Main
</div>
</main>
<footer>
<div id="footerContent">Footer</div>
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment