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

Question

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

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

问题是，当我使用dev chrome工具可以正常工作时，但是当我使用手机时却不能，因为在移动设备上，我有顶部和底部的工具栏，具体取决于我在dev工具上没有的电话，并且在Android上，取决于手机品牌的布局也有所不同。

我所拥有的很简单，我有一个div，它包装了聊天的所有内容，并且上面有一个此类：

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

上方80像素是因为聊天具有顶部标题和底部输入文本，每个文本均具有40像素。

无论如何，仅使用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包括填充，scrollBar和边框。 （请注意， offsetheight在IE 10或更低版本中不起作用）

此外，您可以使用@media 。 这样，您可以决定编写CSS的时间，如果您说min-width: 600px; 例如，它将触发600px以上宽度的所有CSS，而max-width决定当屏幕尺寸过大时应停止触发CSS的时间。 （注意：这是针对CSS的） https://www.w3.org/TR/css3-mediaqueries/

希望这对您有帮助，加油！