Closed jontonsoup closed 7 years ago
Hi @jontonsoup, when I try the following code (and add the real code where I have the "out-of-the-box code" commented out) it seems to work fine. Would you mind sending us your whole code snippet in case this doesn't solve your problem?
<div class="wrapper-for-content-outside-of-footer">
content
</div>
<footer class="footer-2" role="contentinfo">
<!-- footer-2 html code here -->
</footer>
@import "bourbon/bourbon";
@import "neat/neat";
$large-screen: em(860) !default;
.wrapper-for-content-outside-of-footer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
html, body {
height: 100%;
}
.wrapper-for-content-outside-of-footer:after {
content: "";
display: block;
}
.footer-2, .wrapper-for-content-outside-of-footer:after {
height: 17em;
@include media($large-screen) {
height: 4em;
}
}
.footer-2 {
// all the footer-2 styles here
}
Hey, @Magnus-G .
Sure--
application.scss
@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";
@import "application/base";
application/base.scss
@import "utilities";
@import "cards";
@import "footer";
footer.scss
// Uncomment this for a sticky footer.
//
.wrapper-for-content-outside-of-footer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
html, body {
height: 100%;
}
.wrapper-for-content-outside-of-footer:after {
content: "";
display: block;
}
.footer-2, .wrapper-for-content-outside-of-footer:after {
height: 17em;
@include media($large-screen) {
height: 4em;
}
}
.footer-2 {
$base-spacing: 1.5em !default;
......
layout.html
body
.wrapper-for-content-outside-of-footer
include _navigation
block content
include _footer
footer.html
footer.footer-2(role="contentinfo")
.footer-logo
img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png", alt="Logo image")
ul
li
a(href="javascript:void(0)") About
li
a(href="javascript:void(0)") Contact
li
a(href="javascript:void(0)") Products
.footer-secondary-links
ul
li
a(href="javascript:void(0)") Terms and Conditions
li
a(href="javascript:void(0)") Privacy Policy
ul.footer-social
li
a(href="javascript:void(0)")
img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/facebook-logo-circle.png", alt="Facebook")
li
a(href="javascript:void(0)")
img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/twitter-logo-circle.png", alt="Twitter")
li
a(href="javascript:void(0)")
img(src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/youtube-logo-circle.png", alt="YouTube")
Thanks! Jon
I've reworked the code to match the behavior I expect -- not sure if its compatible in the same way as the previous code (CSS is my weakest spot).
.wrapper-for-content-outside-of-footer {
overflow: scroll;
height: calc( 100vh - 4em );
}
.footer {
@include fill-parent;
background: $footer-background;
padding: $base-spacing;
width: 100%;
height: 4em;
I’m closing this as we are focusing our efforts on a new, rewritten Refills library with a focus on accessibility and removal of grid and visual opinion for components. You can see a preview of the work here: http://refills.netlify.com/
Existing components and patterns from the 0.2.0 release will be provided as-is (no longer maintained) until the new version is released.
I just pulled down a fresh copy of bourbon/neat/bitters and installed it in my project. The styles seem to be all working fine. I have not changed any of the code yet.
I then turned on "superglue sticky" mode for footer-2 by uncommenting the SCSS and the HTML, but was unable to see the footer stick.
It seems there is no live example of a sticky footer in the example, so its possible something broke it and no one noticed?
Its also not working when I resize the page-- I have not put my code inside of any neat containers etc.
Here's my code: Layout:
Bottom Nav is copy pasted from the refills page.
Let me know if anyone can reproduce this!
Thanks, Jon