html - 如何使用 Material-UI 创建与我的 iframe 高度匹配的可滚动 div？

Question

我正在创建一个响应式视频播放器，旁边有一个播放列表。这适用于桌面及以上屏幕尺寸。播放列表可以有数百个项目。

我的尝试可在https://codesandbox.io/s/responsive-video-player-playlist-q3601

我面临的问题是当有很多项目时，播放列表部分不可滚动并且其高度与其兄弟（视频播放器）不匹配。

我在找什么
- 播放器和播放列表的高度应该等于视频播放器的高度。
- 播放列表中的大量项目应该是可滚动的。

我尝试了什么？
该演示可在https://codesandbox.io/s/responsive-video-player-playlist-q3601获得

任何帮助是极大的赞赏！

标签： htmlcssreactjsresponsive-designmaterial-ui

Answer 1

您需要对播放列表和播放器、断点和位置使用相同的技巧。

添加一个类可以帮助添加更多的 CSS 规则：

https://codesandbox.io/s/responsive-video-player-playlist-i1msg

CSS部分更新：

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "brown",
    display: "flex"
  },
  playerContainer: {
    position: "relative",
    paddingTop: "37.25%",
    height: 0,
    overflow: "hidden",
    maxWidth: "100%",
    backgroundColor: "#000000",
    [theme.breakpoints.down("sm")]: {
      paddingTop: "56.25%"
    }
  },
  iframe: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "6px solid yellow"
  },
  playlist: {
    position: "relative",
    [theme.breakpoints.down("sm")]: {
      position: "staic"
    }
  },
  playlistContainer: {
    backgroundColor: "lightgrey",
    position: "absolute",
    top: "0",
    bottom: "0",
    right: "0",
    left: "0",
    overflow: "auto",
    [theme.breakpoints.down("sm")]: {
      position: "relative"
    }
  }
}));

和结构：

<Grid container className={classes.root}>
      <Grid item xs={12} md={8} className={classes.playerContainer}>
        <iframe
          title="video"
          src="https://player.vimeo.com/video/66140585"
          frameborder="0"
          className={classes.iframe}
        />
      </Grid>
      <Grid item xs={12} md={4} className={classes.playlist}>
        <Grid container className={classes.playlistContainer}>
          <Grid item xs={12}>
            {lines.map((line, key) => (
              <div key={key}>{line}</div>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </Grid>