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

Question

我正在尝试使用React 创建响应式layout。我发现圣杯布局最适合我的需要，我正在努力使在这个小提琴上找到的那个工作（不是我的）：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% 左右（参见 DOM 中的 class.video-react.video-react-16-9, .video-react.video-react-4-3）。此计算已关闭，并导致播放器扩展超出窗口的innerHeight。

我想出的一个解决方案是为window.innerHeight 创建一个event listener，并根据当前窗口大小计算一个新的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}
        />
      );
    };