移动工具栏/菜单隐藏整个网站高度答案

【问题标题】：Mobile toolbar/menu hides full website height移动工具栏/菜单隐藏整个网站高度
【发布时间】：2021-10-01 04:06:25
【问题描述】：

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

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

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;

【问题讨论】：

标签： javascript html css reactjs responsive-design

【解决方案1】：

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

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

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

【讨论】：

谢谢它的工作，但需要同时申请height: 100%;。