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

我正在尝试使用

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>
    );
}

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>


    );
}

render（）{
返回(
);
}

问题是，它不关心
页眉
和
页脚
，使视频播放器完全适合屏幕，但出于某种原因，它关心的是有一个sidenav，并且适合自己。有没有办法告诉视频播放器div它应该考虑页眉和页脚来调整大小？
视频反应组件使播放器宽度占100%。
要修复此问题，请在渲染组件时尝试以下操作：

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

导出默认道具=>{
返回(
);
}; 
啊，我明白了。你说的是玩家的身高，将应用程序的大小推到了当前窗口的大小之外。这就是我想你说的

在这种情况下，问题来自播放器将
填充顶部设置为约56%（请参见
DOM中的类
.video-react.video-react-16-9.video-react.video-react-4-3
）。此计算已关闭，导致播放机扩展到窗口的
内部高度之外

我提出的一个解决方案是为
窗口.innerHeight
创建一个
事件侦听器
，并根据当前窗口大小计算一个新的
padding top
。使用
样式化组件
之后，我能够将这个新的
填充顶部
偏移量应用于
.video-react.video-react-16-9、.video-react.video-react-4-3
类

工作示例：（请注意，此示例不包括移动设备的任何
CSS
断点）


修复程序在DOM中的外观：
对不起，这是一大堆代码，我不打算仔细阅读。如果这是一个故事，那么它将是一个不同的故事。然而，一般来说，为了让东西填满浏览器窗口，将“位置”设置为“绝对”，并将“底部”、“左侧”、“右侧”和“顶部”设置为0。全屏显示似乎如预期的那样工作。如果您指的是某个视频周围的黑条，那么这与视频的纵横比与显示器的纵横比略有不同有关（因此黑条）。如果您指的是其他内容，请更具体地说明您的问题（并提供图片）。@MattCarlotta我不是指其中任何一个，我指的是，当您在浏览器中打开此页面时，页面不完全适合，但可以滚动。如果我像您所说的那样设置这些设置，它只覆盖了大约30%的屏幕，所以我在其他地方做错了什么。此外，当流体设置为false时，它不适合移动视图中的屏幕。有什么建议吗？我还编辑了问题并添加了
KokPlayer
。这看起来非常好，正是我所需要的，现在更改有点晚（时间上），但我会在早上第一件事尝试一下，并让你知道。非常感谢你的回答。试了一下，效果很好。多谢各位。但是我不得不删除flex-flow:row-wrap
并替换为
柔性方向：列.flex容器中的code>。因为视频不会出现。此外，在手机视图中，您将如何计算高度？一旦为其他设备设置断点，您可能不需要手动设置顶部填充高度。对于移动/平板电脑布局，布局可以是单个列，每个主要组件具有不同的行（您甚至不需要使用
display:flex；
--
display:block；
就足够了）。与其为您这样做，不如查看此页面：。抱歉，如果我已经打扰了您，但我无法找到此问题的答案。也就是说，我制作了一个新的div，它是显示在屏幕右侧的文本。现在在移动视图中，我希望该文本位于页脚下。有没有办法告诉text div（与sidenav几乎相同）它应该放在页脚下？