This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
100% height on body element causing issues #681
Description
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.
Activity
[-]100% height on body tag causing issues[/-][+]100% height on body element causing issues[/+]adamduren commentedon Jan 22, 2015
I am experiencing this issue as well. @jasedwards Any update on this issue?
adamduren commentedon Jan 22, 2015
What is the intention of setting
height: 100%;inangular-material.css?I was about to work around the issue with
html, body { min-height: 100%; }in my own css file.jasedwards commentedon Jan 26, 2015
I fixed it by adding this to my css body {min-height:100%; height:auto;}
ggranum commentedon Feb 5, 2015
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 commentedon Feb 7, 2015
The intention is to keep the
bodyheight fixed so that an innermd-contentis what scrolls. This makes it so that things like sticky work correctly. It is worth exploring whether we can do something better...ggranum commentedon Feb 8, 2015
@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:
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.
50 remaining items
ThomasBurleson commentedon Dec 2, 2015
@ggranum - thx for the feedback. I will escalate a discussion with the team today.
ThomasBurleson commentedon Dec 4, 2015
Getting Started and Layout documentation improvements are coming with PR #6082
ThomasBurleson commentedon Dec 4, 2015
Closed with SHA f6e97a0
Araknos commentedon Dec 20, 2020
Is this supposed to be resolved ? I still have the issue using Angular 9.
Splaktar commentedon Dec 21, 2020
@Araknos Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.