Skip to content

Instantly share code, notes, and snippets.

@AntonLitvin

AntonLitvin/footerBottom.css

Last active July 18, 2017 19:55
Show Gist options
  • Save AntonLitvin/10c080fd86caf4bcf06326aa97803885 to your computer and use it in GitHub Desktop.
Save AntonLitvin/10c080fd86caf4bcf06326aa97803885 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
footerBottom.css
//There is negative bottom margins on wrappers
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
// There is negative top margins on footers
<body>
<div class="content">
<div class="content-inside">
content
</div>
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
// There is calc() reduced height wrappers
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 50px;
}
// There is flexbox
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
// There is from Loftblog
<body>
<div class="wrapper">
<div class="main-content">
content
</div>
</div>
<footer class="page-footer"></footer>
</body>
.wrapper{
position:relative;
min-height:100%;
height:auto!important;
overflow:hidden;
}
.wrapper:after {
content: "";
height: 50px;
display: block;
}
.page-footer{
height: 50px;
margin-top: -50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment