web-dev-qa-db-ja.com

引き出し、マテリアルデザインでは高さ100％が機能しないReact

React Material UI（[Documentation] [1]）のレスポンシブなドロワーを使用しています

ドロワーの高さが常に100％になるように変更しようとしています。これを行うために、現在430に設定されているルートクラスの高さを変更してみました。

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/
htmlcssreactjsmaterial-design
6
user3642173

あなたはすでにこれを解決したかもしれませんが、私は同じ問題に遭遇しました。高さの問題は＃root id内にあるという予感がしました。ルートのdiv IDを別のIDに変更し（applicationを使用）、次のように高さを設定しました。

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

そしてそれは働いた。つまり、＃root idのスタイリングが定義されていると思います。時間がたったら、これが正しいかどうかを探します

12
Nodios

必ずminHeight: '100vh'だけではなくheight: 100vhそれ以外の場合、ページはスクロールしません。

10
Brit Gwaltney

了解しました。テッドの発言は正しいです。それはずっとカメである必要があります（またはこの場合100％ずっと下で：P）。スタイルを次のように変更しました（レスポンシブなドロワーの例から始めたところ、永続的なドロワーを使用しているように見えますが、同じ原則が適用されます）。

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%',
  },
});

これはまだ機能しませんでした。私にとって重要なのは、htmlとbodyの高さ（およびルートより上のすべての親）を100％の高さに変更することです（したがって、私の反応アプリがレンダリングされるhtml、body、および#app）。これが私のapp.scssです：

html {
  height: 100%;
}

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

#app {
  height: 100%;
}

お役に立てれば！

4
Jack

Drawerコンポーネントでheight: '100vh'を使用し、コンテンツで次のスタイルを使用するとうまくいきました：

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

Cssのパーセンテージは、コンテナのサイズに関連しています。 100％の高さにしたい場合は、JSを使用してウィンドウの高さを取得することをお勧めします。それ以外の場合は、静的な高さを設定する必要があります。

0
Joshua Underwood