Skip to content

Instantly share code, notes, and snippets.

@daphotron

daphotron/SassMeister-input-HTML.html

Last active May 20, 2016 16:05
Show Gist options
  • Save daphotron/b056212f40eaf3ac2082258e7027909f to your computer and use it in GitHub Desktop.
Save daphotron/b056212f40eaf3ac2082258e7027909f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SassMeister-input-HTML.html
<div class="wrap">
<div class="wrap-main">
Main
</div>
<footer class="wrap-footer">
<div class="grid-wrapper">
Footer
</div>
</footer>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// LAYOUT FOOTER POSITIONING
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrap {
min-height: 100%;
position: relative;
}
.wrap-main {
min-height: 40em;
overflow: hidden;
padding-bottom: 6em; /* Height of the footer */
}
.wrap-footer {
background-color: #71716C;
bottom: 0;
height: 6em; /* Height of the footer */
width: 100%;
position: absolute;
}
Raw
SassMeister-output.css
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.wrap {
min-height: 100%;
position: relative;
}
.wrap-main {
min-height: 40em;
overflow: hidden;
padding-bottom: 6em;
/* Height of the footer */
}
.wrap-footer {
background-color: #71716C;
bottom: 0;
height: 6em;
/* Height of the footer */
width: 100%;
position: absolute;
}
Raw
SassMeister-rendered.html
<div class="wrap">
<div class="wrap-main">
Main
</div>
<footer class="wrap-footer">
<div class="grid-wrapper">
Footer
</div>
</footer>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment