Saya menggunakan laci responsif dari React Material UI ([Dokumentasi][1])

Saya mencoba mengubahnya sehingga Laci akan selalu memiliki ketinggian 100%. Untuk melakukan ini, saya mencoba mengubah ketinggian kelas root yang saat ini diatur ke 430. Namun, ketika saya mengaturnya ke persentase, itu hanya default ke ketinggian sekecil mungkin.

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/
7
user3642173 27 November 2017, 23:35
3
Kunci masalah Anda adalah 100% dari apa? Jika perlu 100% dari jendela, Anda dapat menggunakan height: 100vh;, jika tidak, Anda perlu mengatur ketinggian elemen induk (dan mungkin lebih banyak leluhurnya jika menggunakan persentase)..
 – 
Ted
27 November 2017, 23:53
Saya baru saja melalui masalah yang sama persis. Saya akan memposting resolusi saya ketika saya sampai di rumah.
 – 
Jack
28 November 2017, 02:13

5 jawaban

Anda mungkin sudah menyelesaikan ini, tetapi saya mengalami masalah yang sama. Saya punya firasat bahwa masalah dengan ketinggian ada di dalam #root id. Jadi saya mengubah id div root saya ke yang berbeda (saya menggunakan aplikasi) dan mengatur ketinggian seperti ini:

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

Dan itu berhasil. Jadi tebakan liar adalah bahwa mereka telah mendefinisikan gaya untuk #root id. Saya akan mencoba menemukan apakah ini benar ketika saya mendapatkan waktu

12
Nodios 11 Maret 2018, 00:32

Pastikan kepada kami minHeight: '100vh' bukan hanya height: 100vh Jika tidak, halaman tidak akan bergulir.

10
Brit Gwaltney 26 September 2018, 21:11

Baiklah, apa yang dikatakan Ted benar. Itu harus menjadi kura-kura sepenuhnya (atau 100% sepenuhnya dalam kasus ini: P). Saya mengubah gaya saya menjadi yang berikut (perhatikan saya mulai dari contoh laci responsif, sepertinya Anda menggunakan laci permanen, tetapi prinsip yang sama berlaku):

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

Ini masih tidak berhasil - kuncinya bagi saya adalah mengubah html dan tinggi badan saya (dan setiap orang tua lainnya di atas root) menjadi tinggi 100% (jadi html, badan, dan #app tempat aplikasi reaksi saya dirender). Ini app.scss saya:

html {
  height: 100%;
}

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

#app {
  height: 100%;
}

Semoga ini membantu!

4
Jack 28 November 2017, 03:31
Sebenarnya ternyata ini tidak bekerja dengan sempurna. Melakukan hal ini menonaktifkan gulir ketika konten melebihi 100% dari tinggi halaman.
 – 
user3642173
28 November 2017, 14:47
Ini berhasil. Di dalam UI bahan reaksi, dari mana ketinggian ini disetel?
 – 
Itzdsp
23 Mei 2019, 23:04

Persentase dalam css relatif terhadap ukuran wadahnya. Jika Anda ingin sesuatu menjadi 100% tinggi maka saya sarankan menggunakan JS untuk mendapatkan tinggi jendela, jika tidak, Anda harus mengatur ketinggian statis.

0
Joshua Underwood 27 November 2017, 23:44

Menggunakan height: '100vh' pada komponen Laci dan menggunakan gaya berikut pada konten berhasil untuk saya:

[theme.breakpoints.up('md')]: {
  marginLeft: drawerWidth
}
0
redgeoff 24 Februari 2018, 02:51