100% height on body element causing issues

[jasedwards]

I am using bootstrap and I have set one of my row elements to be 500 px. I have content above and below this as well. when the page renders I get the top half gray (my body background-color) and the bottom white. I went in to dev tools to take a look and the issue is that the body is not resizing. when I get rid of height:100% that is set on body element in angular-material.css then the issue is fixed.

[adamduren]

I am experiencing this issue as well. @jasedwards Any update on this issue?

[adamduren]

What is the intention of setting height: 100%; in angular-material.css?

I was about to work around the issue with html, body { min-height: 100%; } in my own css file.

[jasedwards]

I fixed it by adding this to my css body {min-height:100%; height:auto;}

[ggranum]

The 100% height on the body element is also the cause of the address bar failing to hide on scroll on (at least) Android+Chrome.

edit: Confirmed same behaviour on iOS+Chrome and iOS+Safari.

[rschmukler]

The intention is to keep the body height fixed so that an inner md-content is what scrolls. This makes it so that things like sticky work correctly. It is worth exploring whether we can do something better...

[ggranum]

@rschmukler Thanks. Unfortunately I'm sure that you've realized by now (perhaps accompanied by a bit of sinking feeling) that even if there isn't something better overall we still won't be able to use 100% height on body. Here's my reasoning:

• The failure to hide the address bar on mobile is a complete non-starter for real world use.
• Even if mobile browsers are updated to 'fix' the address bar issue it won't help those older mobile devices that have the most restricted screen real estate. Also, that's a years-long adoption cycle.
• The longer this issue is set aside, the more internal development is made assuming a static height on body: so, more bugs and more pain later. Unless we're really lucky and there is a simple universal hack.

I hope that the team chooses to rip off this bandaid as soon as possible. The number and variety of fixes that are likely to be introduced to fix this in the wild are likely to lead to more developer pain the longer the current behaviour is maintained. It will also lend to more bugs filed later as consuming devs and teams 'forget' which of their styles only exist to work around this issue.

Thanks again - and of course, thanks for all the hard work.