-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Write up a design pattern for sticky-footers #12
Comments
Just don't go on recommending to use JavaScript ;) On Wed, Aug 1, 2012 at 5:56 PM, Daniel Fischer <
|
Well, You have two options.
OR
#2 makes more sense to me. Why not use Javascript? |
Well with #1 you're basically doing that it doesn't matter if your javascript suddenly explodes. #2 still forces you to have some sort of dom structure. I can go on and debate on why you shouldn't.. like for instance you wasting a lot of time figuring out some math equation for it to work on the betterfrontend site. I don't think I agree that JavaScript is the right tool for this job. There are cases where it makes sense. Others.. not so much. |
I'm with you. I think they are two valid cases. Part of me feels icky that the pure CSS (from that sticky footer site) solution requires: html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;} Fundamentally requiring a set height is very brittle. This is easier to do with SCSS but it's still hackish in my perspective. I think both are valid in the end. It just depends which you're more comfortable with. I think surfacing both techniques is valid, with possible bias towards the CSS one and outlining the other as an alternative design pattern. On your point of "wasting time figuring out some math equation", it's true, but I was handling it wrong. The way I went about it on the betterfrontend site was flawed. Like you said, when you wrap it to a div that automatically knows it's height, it's really easy. In the end, it also comes down to, if the footer is dynamic in height for whatever reason, then a Javascript version makes more sense. I'll put the recommended technique as the CSS flavor and we'll go with that for now. Thanks! |
Write up a design pattern for sticky-footers
The text was updated successfully, but these errors were encountered: