在CSS chrome中搞砸了CSS高度

时间:2016-08-30 23:45:28

标签: android css layout height flexbox

我正在制作网络聊天应用程序。它不适合实际使用 - 只是一个培训项目。我在android中遇到css height属性有困难。我的应用程序在桌面chrome上运行正常,但在android高度保持不变,没有什么值我输入css的值,它也阻止我向下滚动到达我的页面底部。经过半小时的研究,我发现了以下主题:

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

但他们的解决方案都没有对我有用 - 我尝试了两种方法:将我的元素设置为:

display = fixed;

并定义:

min-height: 0;

正如有人建议的那样。没有任何影响。如果有人能够检查Git?我也将其上传到firebase。有趣的是:我整天都在担心宽度,现在我无法修复身高。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

看起来 Chrome for Android 出现了一些问题..所以如果页面可以水平滚动,那么 也会垂直滚动

要解决此问题,请尝试使用以下代码position:fixed

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

您也可以添加这些代码来修复页面中的一些高度问题

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

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

希望这会对你有帮助..