100% height not working for Drawer, Material Design React

material-ui full height grid
material-ui drawer width
material-ui clipped drawer
material ui drawer responsive
material-ui drawer toggle
react material-ui sidebar example
react drawer component
material-ui grid

I'm using the responsive drawer from the React Material UI ([Documentation][1])

I'm trying to change it so that the Drawer will always have a height of 100%. To do this, I tried changing the height of the root class which is currently set to 430. However, when I set it to a percentage it just default to the smallest possible height.

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import { MenuItem } from 'material-ui/Menu';
import TextField from 'material-ui/TextField';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    width: '100%',
    height: 430,
    marginTop: theme.spacing.unit * 3,
    zIndex: 1,
    overflow: 'hidden',
  },
  appFrame: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
  },
  appBar: {
    position: 'absolute',
    width: `calc(100% - ${drawerWidth}px)`,
  },
  'appBar-left': {
    marginLeft: drawerWidth,
  },
  'appBar-right': {
    marginRight: drawerWidth,
  },
  drawerPaper: {
    position: 'relative',
    height: '100%',
    width: drawerWidth,
  },
  drawerHeader: theme.mixins.toolbar,
  content: {
    backgroundColor: theme.palette.background.default,
    width: '100%',
    padding: theme.spacing.unit * 3,
    height: 'calc(100% - 56px)',
    marginTop: 56,
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100% - 64px)',
      marginTop: 64,
    },
  },
});

class PermanentDrawer extends React.Component {
  state = {
    anchor: 'left',
  };

  handleChange = event => {
    this.setState({
      anchor: event.target.value,
    });
  };

  render() {
    const { classes } = this.props;
    const { anchor } = this.state;

    const drawer = (
      <Drawer
        type="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor={anchor}
      >
        <div className={classes.drawerHeader} />
        <Divider />
        <List>{mailFolderListItems}</List>
        <Divider />
        <List>{otherMailFolderListItems}</List>
      </Drawer>
    );

    let before = null;
    let after = null;

    if (anchor === 'left') {
      before = drawer;
    } else {
      after = drawer;
    }

    return (
      <div className={classes.root}>
        <TextField
          id="permanent-anchor"
          select
          label="Anchor"
          value={anchor}
          onChange={this.handleChange}
          margin="normal"
        >
          <MenuItem value="left">left</MenuItem>
          <MenuItem value="right">right</MenuItem>
        </TextField>
        <div className={classes.appFrame}>
          <AppBar className={classNames(classes.appBar, classes[`appBar-${anchor}`])}>
            <Toolbar>
              <Typography type="title" color="inherit" noWrap>
                Permanent drawer
              </Typography>
            </Toolbar>
          </AppBar>
          {before}
          <main className={classes.content}>
            <Typography type="body1">
              {'You think water moves fast? You should see ice.'}
            </Typography>
          </main>
          {after}
        </div>
      </div>
    );
  }
}

PermanentDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(PermanentDrawer);


  [1]: https://material-ui-next.com/demos/drawers/

You might have already resolved this, but I encountered the same issue. I had a hunch that the issue with height was within the #root id. So I changed my root div id to a different one (I used application) and set the height like this:

appFrame: {
    ...
    height: '100vh',
}

and it worked. So a wild guess is that they have defined a styling for #root id. I will try to find if this is correct when I catch some time

html, You might have already resolved this, but I encountered the same issue. I had a hunch that the issue with height was within the #root id. If you are not completely satisfied with the courses, you can get 100% refund within 30 days of your purchase. No hard feelings! Linton comes across like a really nice programmer that wants to help us designers.


Be sure to us minHeight: '100vh' as opposed to just height: 100vh Otherwise the page won't scroll.

100% height not working for Drawer, Material Design React, I'm using the responsive drawer from the React Material UI ([Documentation][1]) I'​m trying to change it so that the Drawer will always have a height of 100%. 100% height not working for Drawer, Material Design React. Ask Question Asked 2 years ago. Why doesn't height: 100% work to expand divs to the screen height? 394.


Alright, what Ted says is correct. It has to be turtles all the way down (or 100% all the way down in this case :P). I changed my styles to the following (note I started from the responsive drawer example, looks like you are using the permanent drawer, but the same principal applies):

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: 0,
    zIndex: 1,
    height: '100%',
    overflow: 'hidden',
  },
  appFrame: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    height: '100%',
  },
  content: {
    backgroundColor: theme.palette.background.default,
    width: '100%',
    padding: theme.spacing.unit * 3,
    height: 'calc(100% - 56px)',
    marginTop: 56,
    [theme.breakpoints.up('sm')]: {
      height: 'calc(100% - 64px)',
      marginTop: 64,
    },
    'overflow-x': 'scroll',
  },
  gridRoot: {
    flexGrow: 1,
  },
  gridPaper: {
    padding: theme.spacing.unit * 2,
    height: '100%',
  },
});

This still didn't work - the key for me was changing my html and body height (and every other parent above root) to 100% height (so the html, body, and #app where my react app is rendered). Here is my app.scss:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
}

#app {
  height: 100%;
}

Hope this helps!

PersistentDrawer demo limits page height to drawer height · Issue , GitHub is home to over 50 million developers working together to host and Chome 66 on OSX; Material UI 1.0.0-beta.43; React 16.3.2 and how it can be integrated into the page than about providing a full layout example. Not only does the content get clipped to the drawer height but I can't figure out  Drawer built with react-motion. Contribute to stoeffel/react-motion-drawer development by creating an account on GitHub.


A percentage in css is relative to the size of its container. If you want something to be 100% height then I suggest using JS to get the window height, otherwise you'll need to set a static height.

[Drawer] error in set drawer's height · Issue #10017 · mui-org , I have searched the issues of this repository and believe that this is not a duplicate. It works well on React v15.6.2 && Material-UI v0.20.0. MUI is a lightweight CSS framework that follows Google's Material Design guidelines. MUI is designed from the ground up to be fast, small and developer-friendly. React Appbar


Using height: '100vh' on the Drawer component and using the following style on the content worked for me:

[theme.breakpoints.up('md')]: {
  marginLeft: drawerWidth
}

Sizing, <Box width={1/4}> // Numbers in [0,1] are multiplied by 100 and converted to <​Box width="75%"> // String values are used as raw CSS. Height 100%. If you are interested in revamping react native drawer to be more performant (i.e. use Animated) please get in touch! React Native Drawer React native drawer, configurable to achieve material design style, slack style, parallax, and more.


Drawers, Design & API Documentation <span class="mdc-list-item__text">Work</span> Drawers can contain a header element which will not scroll with the rest of the In cases where the drawer occupies the full viewport height, some styles must be If you are using a JavaScript framework, such as React or Angular, you can​  @msafrin3 This doesn't work for width more than 600 , thats what the question says, it works upto some limit whcih is 600 if you see inspect element. Copy link Quote reply FethiEfe commented Aug 1, 2019 •


How to make an app drawer with React Hooks and CSS, I started learning React in general about a year back through work. Adding a drawer to any app can really be as easy as going to the Material UI We assign the drawer container some width and height dimensions as before, as well as a Basically to turn the transparency of the black border to full (ie:  clipped = sets height of drawer to 100% minus the height of the app bar (64px by default) so it does not overlay the app bar. pushContent = sets left (or right) margin of the main body content to the width of the drawer so the drawer pushes content instead of overlaying it.


The Material-UI grid system, with prebuilt UI components, including buttons, navbars, navigation drawers, and, The Material-UI library provides React components that implement The container prop gives the <Grid /> component the CSS properties of a const classes = { paper: { height: 140, width: 100 }, control: { padding: 20,  If you have created a modal using: And then add long content, the scrolling does not work and the modal is locked to the screen height.I fixed it by adding:.modal-full-height {height:auto !important;}to my site.css file, which allows content to scroll, but the modal then loads to whatever height the content is and not