CSS height messed up in Android chrome

Question

I am making a web chat application. It is not intended for real use - just a training project. I am having difficulties with css height property in android. My app behaves normaly on desktop chrome, but on android height stays the same, no mather what values I type in css, and it also prevents me from scrolling down to get to the bottom of my page. After half an hour of researching I found these topics:

https://github.com/angular/material/issues/6841
https://bugs.chromium.org/p/chromium/issues/detail?id=546034#c6

But none of their solutions worked for me - I tried both: setting my elements as:

display = fixed;

and defining:

min-height: 0;

As it was suggested. No effect whatsoever. If anyone could be kind enough to check Git? I also have it uploaded on firebase. The funny thing is: I spent all day worrying about width, and now I can't fix height. Any help will be greatly appreciated.

Answer 1

It Looks like that Chrome for Android is having some problems .. so if the page can scroll horizontally, it will scroll vertically too.

To do a workaround try position:fixed as the following code :

@media only screen and (max-width: 960px) and (orientation: portrait) {
    #wrapper {
        width:98%;
        margin-left:2%;
        position: fixed;
    }
}

also you can add these codes to fix some height problems in your page

#chat {
    height: calc(100% - 50px);
}

@media only screen and (max-width: 960px) and (orientation: portrait) {
    #chat-wrapper #chat-box {
        height: calc(100% - 90px);
    }
}

Hope this will help you ..

CSS height messed up in Android chrome

Sign up