search

dfischer / betterfrontend

A community recommendation on how to make front-end development better. How-to, best-practices, and more.
http://www.betterfrontend.com
77 stars 10 forks source link

Write up a design pattern for sticky-footers #12

Open dfischer opened 12 years ago

dfischer commented 12 years ago

Write up a design pattern for sticky-footers

MarioRicalde commented 12 years ago

Just don't go on recommending to use JavaScript ;)

On Wed, Aug 1, 2012 at 5:56 PM, Daniel Fischer < reply@reply.github.com

wrote:

Write up a design pattern for sticky-footers

Reply to this email directly or view it on GitHub: https://github.com/hybridgroup/betterfrontend/issues/12

dfischer commented 12 years ago

Well,

You have two options.

1) You can structure your DOM for it and hard code the the padding differences into the stylesheets.

OR

2) You can dynamically have more independence of the styles and calculate it based on viewport using Javascript.

2 makes more sense to me. Why not use Javascript?

MarioRicalde commented 12 years ago

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.

dfischer commented 12 years ago

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!