body {
   width: 100%;
   height: 100%
}

100%会根据屏幕大小自行调整但出于某种原因 100vh在屏幕变化时调整有问题，所以如果你使用100vh或100%，使用底部0将受到影响

例如，当搜索栏在视图中或不在移动中，100%与变化，其中100vh将粘在屏幕高度的第一个值

在我的应用程序，我这样做(typescript和嵌套postcss，所以改变相应的代码):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

在你的css中:

:root {
    --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

它至少可以在chrome手机和ipad上运行。不工作的是，当你添加你的应用程序到iOS的主屏幕上，并改变方向几次-以某种方式缩放级别混乱的innerHeight值，我可能会发布一个更新，如果我找到一个解决方案。

Demo

你可以试着给出位置:fixed;上图:0;底部:0;属性到您的容器。

VH 100在移动设备上表现不佳，因为它没有考虑iOS栏(或其他平台上的类似功能)。

一个很好的解决方案是使用JavaScript的"window.innerHeight"。

简单地将元素的高度赋给这个值。 $ (' .element-name ') .height (window.innerHeight);

注意:在JS中创建一个函数可能很有用，这样当屏幕调整大小时，高度就可以改变。但是，我建议只在屏幕宽度改变时调用该函数，这样当用户向下滚动页面时iOS栏消失时，元素的高度就不会跳跃。

React用useEffect和useState挂钩解决方案

    function App() {
      const [vh, setVh] = useState(window.innerHeight);
    
      useEffect(() => {
        const updateVh = () => {
          setVh(window.innerHeight);
        };
    
        window.addEventListener('resize', updateVh);
    
        return () => window.removeEventListener('resize', updateVh);
      }, []);
    
      return (
        <div style={{ height: vh }}>
          {vh} px
        </div>
      );
}

演示:https://jsfiddle.net/poooow/k570nfd9/

尝试html, body {height: 100%}在移动设备上达到100vh的效果。