Twenty Fourteen: Browser height is not filled for short content

[wycks]

When posting content that doesn't fill up the browser's height, for example a short page with comments turned off, the sidebar and footer does not expand to fill 100%.

Current problem:

What it should look like:

Possible solutions: javascript, cross browser hacks (CSS), changing the box model to adhere to a 100% height.

[iamtakashi]

Replying to wycks:

I personally don't think that's a huge deal but if we can achieve that with only CSS without JS and not to compromise anything else, that could be a "nice to have" improvement. @wycks, are you able to cook a patch?

[wycks]

Replying to iamtakashi:

I also think it's minor, I tried a patch but ran into several problems, it's actually quite tricky.
The CSS hacks are not very browser compatible, especially for >IE8 and the mixture of media queries. For example there is an very easy way to do this just using something like:

#secondary{height:100vh;}

But it's not 100% compatible: ​http://caniuse.com/#feat=viewport-units

I don't like the idea of JS adjusting the DOM on the fly.

That leaves adjusting the structure which is a larger undertaking, for example making sure the html, body and sidebar descendants are all set to 100% height, this doesn't work outside the box so I will play around with it some more to see if a simple changes works.

[taupecat]

I like the 100vh solution: it's simple, it's performant, and it's IE9+ compatible. Couldn't we implement that and just not worry about older versions of IE? After all, ​http://dowebsitesneedtolookexactlythesameineverybrowser.com/

[iamtakashi]

Replying to taupecat:

Couldn't we implement that and just not worry about older versions of IE?

Agreed. I don't think we need to make things complicated for older versions of IE for this matter as it's not really broken or anything.

[wycks]

Tested in Chrome 29, FF 22+ and ie9. It's not perfect but I think it's better than having it float mid page.

To test, create a post without comments and no content.

[taupecat]

The net result of this patch is the footer is now always "below the fold", no matter how tall the viewport is. If we're okay with this, then the patch works as advertised.

Food for thought for Twenty Fifteen: flexbox (a very promising CSS technique that's not QUITE ready for prime time, mostly b/c of IE support), has a better solution for the sticky footer problem. See ​http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

[lancewillett]

Replying to taupecat:

The net result of this patch is the footer is now always "below the fold", no matter how tall the viewport is. If we're okay with this, then the patch works as advertised.

We could only apply the rule when no footer widgets exist, based on body_class value.

[wycks]

The flexbox technique will show the same result, the problem is not the viewport units, it's the the dom structure which would require re-doing.

When widgets are present it's still below the fold, but it does look better.

[taupecat]

Replying to lancewillett:

We could only apply the rule when no footer widgets exist, based on body_class value.

So right now, there is no change in the body_class value when there are footer widgets, based on my observations at least. So a patch for this would need to:

• Set the body_class with a footer widget indicator
• Change the CSS to require that body_class NOT be present in order to apply the 100vh

Additionally, we should probably change the "height: 100vh" to be "min-height: 100vh", as that's more precisely what we're trying to accomplish.

[taupecat]

Supercedes 25389.diff; tests for presence of footer widgets and only applies min-height if no footer widgets exist.

[lancewillett]

I love the logic -- but it seems backward to always add the body class for the absence of footer widgets.

Can you turn it around so that the body class is only when footer widgets exist? Then the style can be applied to #secondary rule just above, and turned off by the body class: min-height: 0.

[taupecat]

Supercedes 25389.2.diff; flips that patch in the way Lance suggested.

[lancewillett]

In 25736:

Twenty Fourteen: fill browser height to 100% for views with short content. Accounts for footer widgets, in which case the height isn't set to 100% so that the widgets remain visible. Props wycks and taupecat, fixes #25389.

[DrWeidinger]

Hi Team,

How would one go about integrating this fix? I'm running WordPress 3.8.1 and Twenty Fourteen 1.0, but still experiencing the bug as described at the beginning of this thread. I've tried a few things, namely taupe cat's link: ​http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ but to no avail.

Suggestions would be appreciated. Thanks!