100% height on body and html breaks document height calculation using off canvas wrap

[aiaf]

Foundation 5.1.0 added the following

html, body {
  height: 100%; }

This breaks document height calculation when off-canvas-wrap menu is opened (i.e. has .move-right or move-left).

Instead of returning document height, it returns the view port's (i.e. window) height.

[zurbrandon]

Not able to duplicate this. When i add a bg color to the body it gets applied to the whole doc, not just the VH.

[Aetles]

The height: 100%; also breaks StickyFooter in Foundation.

[stevetrask]

If you inspect the templates on Foundation site http://foundation.zurb.com/templates/banded.html
the body tag does not go to the bottom in height value but is set at widow height, you are able to colour the background though?

[stevetrask]

Found something! When you apply a flat colour it is fine but if you apply a gradient like so it does stop at the actual body height:

.general-page {
  /* Old browsers */
  background: #fff;
  /* FF3.6+ */
  background: -moz-linear-gradient(top, #fff 0%, #eff1f2 100%);
  /* Chrome,Safari4+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #eff1f2));
  /* Chrome10+,Safari5.1+ */
  background: -webkit-linear-gradient(top, #fff 0%, #eff1f2 100%);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff 0%, #eff1f2 100%);
  /* IE10+ */
  background: -ms-linear-gradient(top, #fff 0%, #eff1f2 100%);
  /* W3C */
  background: linear-gradient(to bottom, #fff 0%, #eff1f2 100%);
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eff1f2',GradientType=0); }

[stevetrask]

If you adjust the html css to height: auto; this fixes the issue but obviously this could make alterations somewhere else?

[Aetles]

So this means that 100% height on body stays? Is it really needed?

Here is current Foundation 5 and Sticky Footer which is not working:
http://codepen.io/aetles/full/Gbclu

Here I added height: auto; to body and Sticky Footer works:
http://codepen.io/aetles/full/jAdzw

[stevetrask]

I agree with Aetles, the bug is still there as you can see with the gradient background as in previous comment above.

Example here http://cdpn.io/Bgkde

[Aetles]

Looking into it, 100% body height was added in 42be957. The comment says Must be 100% for off cavas to work. But is that really true? In what cases is 100% height needed?

A quick test of off-canvas with body height set to "auto" seems to work here:
http://codepen.io/aetles/full/hEdGm

[coreysyms]

Aetles is correct, that adding height auto to html, body in your app.css file will override Foundations height 100% and will correct any issues with the sticky footer. I am working to find a "cleaner" method to correcting this issue.

[ZeeCoder]

I really don't like the way this was implemented.
If the off-canvas feature needs html/body 100% height, I think it must be refactored, since this can - and will - cause surprises for developers - including myself - which will cause some unnecessary Googlin' and time wasting.

I needed my html and body tag to have it's real height, but as I can debug it by hovering over the tags in inspection mode, I realised that due to some foundation defaults, the behaviour changed.
This is a bother, since I don't even use this feature, but it has it's side effects anyway.

I always tell others, that one of the best thing in Foundation over Bootstrap, that it don't really mess with your work.
As the name "Foundation" suggests, it should give only the foundations and no more.
Even if it does give you more than that, those features (and side-effects) should be optional.

Sorry for the long comment, but I'm at the point where I have a foundation-reset css, and it really bothers me.

[mdamaceno]

It's the same problem I noticed before (#5505), but asked me to post on the forum. I do not know why since it is a problem of Foundation.

[Aetles]

I did ask i in the forums but did not get any real answer there, only this which makes no sense:

Hey, it has been included because it was ZURB's style choice, nothing to do with functionality.

[coreysyms]

I did make a change to stickyFooter to support Foundations height 100%, http://github.com/coreysyms/foundationStickyFooter

You can leave height 100% in or change it to auto, it's your choice.

[ZeeCoder]

Well great for the Sticky Footer, but this is exactly the issue I think.
After finally finding the issue developers are forced to work around it somehow.

[Aetles]

I wonder if it's related to the position: relative; on body that Foundation uses... (which is said to have something to do with off canvas, and have caused some trouble for me when integrating with Xenforo).

[lauhakari]

But it's weird really, because normally you would set the html to height:100% so that it will always cover the full height of the viewport.
But in this (foundation's) case it is the opposite, as setting html = h:100% makes it cover less and removing the attribute makes it cover the page :P

[LauraLalune]

+1 I see all the behaviour described: the body is even shortest than the main wrapper div (resolved by putting height:auto to it).
Also, I tried with equalizer http://foundation.zurb.com/docs/components/equalizer.html by putting data-equalizer on html tag (!hopeless try): data-equalizer-height print a weird "height:inherit" on child tags.
I'm trying to put a footer at the end of the page but NOT sticky, and it stays at the end of the main wrapper, correctly, which unfortunately has not full height...

I'm a bit confused: I see foundation team doesn't support the community so much (I was fighting with dropdown alignement issue just yesterday and discovered the same "mute" feedback by foundation). It's a pity because it was me who sponsored this over bootstrap in my organization!

[ZeeCoder]

Exactly.
I like the way Foundation works, I like the "feel", when you work with the framework, a lot of things just makes more sense than in other frameworks.
But issues like this makes you think.

I don't mean to be mean, I really do love the framework, and since it's OS, I can hardly complain.
I just want this framework to be more popular, as it deserves that, but issues like this will push developers away. :/

[LauraLalune]

I tried to remove everything I added to fix the problem and just left a min-height:100%; height:auto; on the first page wrapper.
Then I realize I did something wrong in the sidenav: I used some visible-for and hide-for classes for responsive on some menu voices. The hidden voices seem to be added to the page height if the class was on a child element of a

. Moving the class to a separate

solved the prolem :)

[ZeeCoder]

Had to reset this again...
I'm moving to bootstrap.

[LauraLalune]

Too bad :( I hope they'll do something.

[gwagroves]

Also had this problem with a Foundation HTML document and iframe-resizer.

The height of the document could not be calculated due to body and html having height: 100%.

Removing the height declaration fixed it.

[ZeeCoder]

Will Foundation 6 fix this?
Does anyone know?