Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created October 7, 2014 15:30
Show Gist options
  • Save feo52/f80ed2fd510f55bb2f39 to your computer and use it in GitHub Desktop.
Save feo52/f80ed2fd510f55bb2f39 to your computer and use it in GitHub Desktop.
Download ZIP
sticky footer with calc(vh)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ margin:0; padding:0; }
.quarterSplit{ background:MintCream; text-align:center; width:23%; margin:0 1%; float:left; }
.howToUseDemo{ background:LightBlue; text-align:center; }
.contentsItem{ background:LightPink; text-align:center; height:400px; line-height:400px; }
.normalFooter{ background:LimeGreen; text-align:center; height: 2em; line-height: 2em; }
.scaredFooter{ background:LimeGreen; text-align:center; height: 2em; line-height: 2em; }
.stickyFooter{ background:LimeGreen; text-align:center; height: 2em; line-height: 2em; }
.stickyFooter{
position: -webkit-sticky;
position: sticky;
bottom: 0px;
}
.above-Footer{
min-height: calc(100vh - 2em);
}
</style>
</head>
<body>
<div class="quarterSplit">
<div class="howToUseDemo">
change window-size.<br />
change scrollbar-position.<br />
</div>
</div>
<div class="quarterSplit">
<div class="contentsItem">contents</div>
<div class="normalFooter"> normal </div>
</div>
<div class="quarterSplit">
<div class="contentsItem">contents</div>
<div class="stickyFooter">position</div>
</div>
<div class="quarterSplit">
<div class="above-Footer">
<div class="contentsItem">contents</div>
</div>
<div class="scaredFooter">calc(vh)</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment