I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar.
Is there a way to dynamically resize the site so that it fits within the inner window height of a mobile device and automatically adjusts when the toolbar is hidden? Below, you will find my test code along with examples illustrating the issue:
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;