score:0

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.

score:0

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

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

score:1

Adding height: '100%' to both the body and html worked for me

score:5

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!

score:13

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

score:13

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


Related Query

More Query from same tag