移动工具栏/菜单隐藏完整的网站高度

Question

我发现这个问题似乎没有一个明确的解决方案来在移动用户访问站点的情况下响应性地调整大小并且整个高度延伸到工具栏/菜单上，除非他们手动隐藏工具栏。

如何调整站点大小，以便高度在移动设备窗口的内部高度内响应，并在隐藏工具栏时自动调整大小？ 这是我的测试代码和问题的一些示例：

import React from "react"
import { styled } from '@material-ui/core/styles'

const App = () => {
  return (
    <>
      <List>
        <Block />
      </List>
    </>
  );
}

const Block = styled('div')({
  height: 100,
  width: '100%',
  background: 'white',
  marginTop: 'auto',
})

const List = styled('div')({
  display: 'flex',
  height: '100vh',
})

export default App;

Answer 1

Mobile safari 与100vh有一些有趣的交互。 现在，它基于折叠的地址栏和底部浏览器按钮。 当这些项目回来时，它仍然保持“滚动”视口的大小。

有一组新的高度声明可以帮助解决这个问题。 他们也在更新规范以在未来处理这个问题，但现在这应该可以解决问题：

const List = styled('div')({
    display: 'flex',
    min-height: 100vh;
    min-height: -webkit-fill-available;
})