Mobile toolbar/menu 隐藏整个网站高度

Question

我发现这个问题似乎没有明确的解决方案来响应移动用户访问网站时调整大小，并且整个高度延伸到 toolbar/menu 除非他们手动隐藏工具栏.

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

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;
})

Mobile toolbar/menu 隐藏整个网站高度

Mobile toolbar/menu hides full website height

html

javascript

css

responsive-design

reactjs