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

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

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

问题是，当我使用dev chrome工具时，效果很好，但当我使用手机时，情况并非如此，因为在手机上，我有顶部和底部工具栏，这取决于我在dev工具上没有的手机，而在Android上，这取决于手机的品牌，也有不同的布局

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

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

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

是否仅使用CSS就可以解决此问题？

---

提前感谢您使用以下样式使您的容器适合屏幕：

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

---

无法从CSS获取屏幕的高度

这是计算正在使用的

div

高度的方法。只需在它之后运行一个

控制台。使用您设置的值记录
。如果这是你要问的。（注意：这是javascript）

或：

clientHeight
包括填充

offsetHeight
包括填充、滚动条和边框。（注意
offsetheight
在10或以下的情况下不起作用）

此外，您还可以使用
@media
。如果你说
minwidth:600px，那么你就可以决定什么时候启动你编写的CSS
例如，它将触发所有写入600px宽度以上的CSS，
max width
另一方面决定当屏幕尺寸过大时触发的CSS何时停止。（注意：这是用于css的）

希望这能进一步帮助你，干杯
 感谢您的帮助，我使用了类似的解决方案，而不是clientHeight或offsetHeight，我使用window.innerHeight并将该值设置为具有类“msg container base”的。我在一个调用eventListener的函数中实现了这一点orientationchange@Santiago我很高兴能够帮助您找到解决方案！：）
var clientHeight = document.getElementById('myDiv').clientHeight;

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