div要给固定高度，如何根据实际做动态调整

Question

这个问题困扰了我很久，问题是这样的，在使用一些别人的插件，或者你自己做一些功能的时候，比如百度地图（需要你给一个div作为容器，并且指定高度），自己在移动端写一个右侧弹出功能做为菜单选择（也要固定高度，然后设置overflow，让多出的内容可以滚动，一般这个高度要和设备屏幕显示高度一致）。问题普遍反映需要对容器设置固定高度，因为高度是固定的，所以要有实际值，然而电脑分辨率和手机分辨率都不一样，为了让容器铺满高度应该和屏幕做适配，所以直接设置固定值不行，我一般做法是在加载页面的时候，先用js获取设备高度修改容器的height属性，在去对容器做操作。我觉得应该有更好的方法，因为在使用一些整套的UI框架的时候，都是对不同设备做出适配的（如果是使用js获取高度去设置容器的，当改变设备时，容器因为整体的高度发生变化就出问题了，需要你刷新页面去执行js对容器赋值新的高度，然而使用别人的框架没有这样的问题），对CSS不是很熟悉，是不是有这样的机制可以做到？ 来大佬指导下。

Answer 1

不知道你的布局啥样的。实现的方式其实还是挺多的。比如单位vh(100vh = 屏幕高度),如果高度屏幕的一半，那就50vh就可以了，就算屏幕高度变了，这个高度还是屏幕的一半。或者calc属性或者flex布局等等。这个可以自己去查一下，看哪个比较符合你的需求，或者你觉得哪个简单用哪个。

Answer 2

100vh 满屏高度，100vw 满屏宽度；