具有100%高度的div在任何设备上

Question

我已经尝试了很长一段时间了，我找不到解决办法。

我的页面上有一个聊天窗口(是一个小部件)，当它在手机上打开时，它应该使用任何设备屏幕高度的100%。

问题是，当我使用dev chrome工具时，效果很好，但当我使用手机时，它就不起作用了，因为在手机上，我有顶部和底部工具栏，这取决于我在开发工具上没有的手机；而Android上，取决于手机品牌，也有不同的布局。

我所拥有的很简单，我有一个div，它封装了聊天的所有内容，并且我有这个类：

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

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

是否只有CSS才能解决这个问题？提前感谢

Answer 1

从CSS获取屏幕高度是不可能的。

这是如何计算您正在使用的div的高度。只需使用您设置的值在其后面运行console.log即可。如果这是你想要的。(注:这是javascript)

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

或者：

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

clientHeight包括填充。

offsetHeight包括填充、scrollBar和边框。(注：offsetheight不适用于第10条或以下)

更进一步，您可以使用@media。这样，您就可以决定您编写的CSS何时触发，例如，如果您说min-width: 600px;，它将触发在600 as宽度以上的所有CSS，而max-width则决定当屏幕大小过大时，启动的CSS何时停止。(注:这是用于css) https://www.w3.org/TR/css3-mediaqueries/

希望这能进一步帮助你，干杯！

Answer 2

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

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