I am developing a React application where I need the content to always occupy at least 100% of the height to style the background accordingly. I have attempted to achieve this by setting the CSS height to 100% at the top level, which works fine. However, the problem arises when the content within the root element exceeds 100%, as the scrollbar does not appear when the content extends beyond the page. Does anyone have suggestions on how to make the vertical scrollbar show up when the height is set to 100%?
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
height: 100%;
}
#root {
height: 100%;
}
Index
<html>
<body>
<div id="root"></div>
</body>
</html>
App (content is being rendered in content)
/* eslint-disable flowtype/require-valid-file-annotation */
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
... (the rest of the code goes here)
...
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);