Question

我已经尝试了很长时间了，我找不到解决方案。

我的页面上有一个聊天窗口（是一个小部件），当它在移动设备上打开时，它应该在任何设备上使用屏幕高度的100％。

问题是当我使用dev chrome工具工作正常时，但是当我使用手机时却没有，因为在手机上我有顶部和底部工具栏，具体取决于我在开发时没有的手机工具，在Android上，取决于手机的品牌也有不同的布局。

我拥有的很简单，我有一个div包含聊天的所有内容，我有这个课程：

.msg-container-base {
    height: calc(100vh - 80px);
    clear: both;
}

80px以上是因为聊天有一个顶部标题和一个底部输入文本，每个都有40px。

无论如何只使用CSS来解决这个问题吗？提前致谢

Answer 1

要使容器适合屏幕，请使用以下样式：

html,body {height:100%}
.you-container {height:100%}

Answer 2

无法从CSS获得屏幕的高度。

这是您计算正在使用的div的高度的方法。只需使用您设置的值运行console.log。如果这是你要问的。（注意：这是javascript）

var clientHeight = document.getElementById('myDiv').clientHeight;

或者：

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight包含填充。

offsetHeight包括填充，滚动条和边框。（注意offsetheight在I.E.10或以下不起作用）

此外，您可以使用@media。有了这个，你可以决定当你写的CSS被触发时，如果你说min-width: 600px;，它会触发写在600px宽度之上的所有CSS，max-width另一方面决定何时当屏幕尺寸过大时，应该停止触发CSS。（注意：这是针对css）https://www.w3.org/TR/css3-mediaqueries/

希望这可以帮助你进一步，欢呼！

在任何设备上高度为100％的div

2 个答案: