Alex Alex - 1 year ago 51
Android Question

CSS height messed up in Android chrome

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:

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 Source

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 {
        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 ..