Question

我正在尝试使用layout创建响应式React。我发现圣杯布局最适合我的需求，我正在努力使这一小提琴作品中找到的布局（不是我的）：Holy Grail fiddle。

我还将video-react用于我的视频播放器video-react。

我得到的布局在全尺寸时不适合在屏幕上显示，但在移动视图中非常适合。

这是我的代码：

App.js

render() {
    const { expanded } = this.state;
    return (
        <React.Fragment>

            <nav className="header navbar navbar-light bg-success mb-auto">
                <span className="navbar-brand mb-0 h1" style={{paddingLeft: '10%'}}>Venoossed</span>
            </nav>


            <div className="holygrail-body">
                {/*KokPlayer*/}
                <div className="content">
                    <KokPlayer currentUrl={this.state.source} playerState={this.state.playerState}/>
                </div>

                <div className="side-navigation">
                    <hr />
                    <div style={{width: 'inherit'}}>
                        <Sidenav
                            expanded={expanded}
                            defaultOpenKeys={['3', '4']}
                            activeKey={this.state.activeKey}
                            onSelect={this.handleSelect}
                        >
                            <Sidenav.Body className="bg-light">
                                <Toggle onChange={this.handleToggle} checked={expanded}/>
                                <Nav>
                                    {this.sources.map(source =>
                                        <Nav.Item key={source.id} eventKey={source.id} icon={<Icon icon="dashboard"/>}>
                                            {source.name}
                                        </Nav.Item>
                                    )}

                                    <Dropdown eventKey="3" title="Advanced" icon={<Icon icon="magic" />}>
                                        <Dropdown.Item >Geo</Dropdown.Item>
                                        <Dropdown.Item >Devices</Dropdown.Item>
                                        <Dropdown.Item >Loyalty</Dropdown.Item>
                                        <Dropdown.Item >Visit Depth</Dropdown.Item>
                                    </Dropdown>
                                </Nav>
                            </Sidenav.Body>
                        </Sidenav>
                    </div>
                </div>
            </div>

            <nav className="footer navbar navbar-light bg-success mb-auto">
                <div style={{display: 'block', margin: '0 auto', verticalAlign: 'middle'}}>
                    <Button onClick={() => this.changePlayerState('play')} className="mr-3">
                        play()
                    </Button>
                    <Button onClick={() => this.changePlayerState('pause')} className="mr-3">
                        pause()
                    </Button>
                    <Button onClick={() => this.changePlayerState('fs')} className="mr-3">
                        FullScreen()
                    </Button>
                </div>
            </nav>

        </React.Fragment>
    );
}

holygrail.scss

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 60px;
  background: pink;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
}
body .holygrail-body .content {
  flex: 1 0 auto;
  background: lightgreen;
}
body .holygrail-body .side-navigation {
  width: auto;
  list-style: none;
  text-align: left;
  order: -1;
  background: yellow;
  margin: 0;
}
body .holygrail-body .flex-aside {
  width: auto;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;
  background: cyan;
}
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .side-navigation, body .holygrail-body .flex-aside {
    width: 100%;
  }
}

我的问题是，如何使其完全适合屏幕显示？

编辑

还要添加KokPlayer渲染部分：

render() {
    return (

        <div className="video-wrapper">
            <Player ref="player" autoPlay muted>
                <source src={this.props.currentUrl}/>
                <ControlBar disableCompletely/>
            </Player>
        </div>


    );
}

问题是，它不关心header和footer并使视频播放器完全适合屏幕显示，但是由于某种原因，它关心是否存在sidenav并适合其自身。有没有办法告诉视频播放器div应该通过考虑页眉和页脚来调整大小？

Answer 1

啊，我明白了。您正在谈论播放器的高度，使应用程序大小超出当前窗口大小。那就是我想你在说的。

在这种情况下，问题出在玩家将padding-top设置为约56％（请参阅.video-react.video-react-16-9, .video-react.video-react-4-3中的课程DOM）。该计算已关闭，并导致播放器扩展到窗口的innerHeight之外。

我想到的一个解决方案是为event listener创建一个window.innerHeight并根据当前窗口大小计算一个新的padding-top。然后，使用stylized-components，我可以将这个新的padding-top偏移量应用于.video-react.video-react-16-9, .video-react.video-react-4-3类。

工作示例：https://ox69p34op5.codesandbox.io/（请注意，该示例不包含移动设备的任何CSS断点）。

此修复程序在DOM中的外观：

Answer 2

视频反应组件使播放器宽度达到100％。要解决此问题，请在呈现组件时尝试以下操作：

    export default props => {
      return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
          fluid={false}
        />
      );
    };

使用React使Web应用程序完全适合屏幕

2 个答案: