AppBar position="fixed" shouldn't require a shim

In order to make the AppBar (position=static) work in the least surprising way a shim is required:

<AppBar position="static">...</AppBar>
<div style={{height: 64}}>Shim - Not visible</div>
<List>...</List>

[oliviertassinari]

@StokeMasterJack I believed you meant fixed in the example.

There are different solutions to this problem:

• you can use the sticky position (non supported by IE 11):

<AppBar position="sticky" />

• you can use a second static app bar as a shim:

<AppBar position="fixed" />
<Toolbar />
// The body...

• you can use this mixin to apply the style to a different element: https://github.com/mui-org/material-ui/blob/a88a405eaf4e57fb2ff8cb88599ecaf31e786b77/src/styles/createMixins.js#L17-L25.

P.S. the height of the AppBar is dynamic, it changes with the screen width.

[aprilmintacpineda]

Isn’t there any way we can get the height current height of the topbar on our styles?

This is what I want to achieve

export default theme => {
  return {
    container: {
      height: `calc(100vh - ${theme.topbar.height})`
    }
  };
};