Skip to content

Instantly share code, notes, and snippets.

@Fabianopb

Fabianopb/index.html

Created March 8, 2017 12:53
Show Gist options
  • Save Fabianopb/45389b0fc3b9e104f45cba9efc533f6d to your computer and use it in GitHub Desktop.
Save Fabianopb/45389b0fc3b9e104f45cba9efc533f6d to your computer and use it in GitHub Desktop.
Download ZIP
Page with fixed header and flexible "copyright" using only flexboxes
Raw
index.html
<html>
<body>
<div class="wrapper">
<div class="header">
header
</div>
<div class="content">
CONTENT CONTENT CONTENT
<div class="footer">
Copyright
</div>
</div>
</div>
</body>
</html>
Raw
style.css
html, body {
height: 100%;
margin: 0;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
}
.content {
flex: 1;
overflow: auto;
}
.footer {
flex: 1 0 20px;
display: flex;
justify-content: center;
align-items: flex-end;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment