[英]Making web application fit fully on screen using React
I am trying to create a responsive layout
using React
. 我正在尝试使用
React
创建响应式layout
。 I found that the Holy Grail layout fits best to my needs and I am trying to make the one found on this fiddle work (It is not mine): Holy Grail fiddle . 我发现圣杯的布局最符合我的需要,我试图让这个小提琴上找到的那个(这不是我的): 圣杯小提琴 。
I am also using video-react
for my video player, video-react . 我也在为我的视频播放器使用
video-react
, 视频反应 。
The layout I get is not fitting on the screen when it's full size, but fits pretty well when it is in mobile view. 我得到的布局在完整尺寸时不适合屏幕,但在移动视图中非常适合。
And here is my code: 这是我的代码:
App.js 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 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%;
}
}
My question is, how can I make it fit fully on screen? 我的问题是,我怎样才能让它完全适合屏幕?
EDIT 编辑
Adding also the KokPlayer
render part: 还添加了
KokPlayer
渲染部分:
render() {
return (
<div className="video-wrapper">
<Player ref="player" autoPlay muted>
<source src={this.props.currentUrl}/>
<ControlBar disableCompletely/>
</Player>
</div>
);
}
The problem is that, It does not care for header
and footer
and makes the video-player fit fully on screen, but for some reason it cares that there is a sidenav and fits itself properly. 问题是,它不关心
header
和footer
,并使视频播放器完全适合屏幕,但由于某种原因,它关心有一个sidenav并适合自己。 Is there a way to tell the video-player div that it should resize by taking header and footer into account? 有没有办法告诉视频播放器div它应该通过考虑页眉和页脚来调整大小?
Ahhh, I see. 啊,我明白了。 You're talking about the player's height pushing the application size beyond the current window size.
你在谈论玩家的高度推动应用程序大小超出当前窗口大小。 That's what I figured you were talking about.
这就是我想你要说的。
In that case, the problem arises from the player setting a padding-top
of around ~56% (see class .video-react.video-react-16-9, .video-react.video-react-4-3
in the DOM
). 在这种情况下,问题出现在玩家设置约56%的
padding-top
(参见类.video-react.video-react-16-9, .video-react.video-react-4-3
in the DOM
)。 This calculation is off and is causing the player to expand beyond the window's innerHeight
. 此计算已关闭,导致玩家扩展到窗口的
innerHeight
。
A solution I came up with was to create an event listener
for the window.innerHeight
and to calculate a new padding-top
based upon the current window size. 我想出的解决方案是为
window.innerHeight
创建一个event listener
器,并根据当前窗口大小计算一个新的padding-top
。 Using stylized-components
I was then able to apply this new padding-top
offset to the .video-react.video-react-16-9, .video-react.video-react-4-3
classes. 使用
stylized-components
,然后我能够将这个新的padding-top
偏移应用于.video-react.video-react-16-9, .video-react.video-react-4-3
类。
Working example : https://ox69p34op5.codesandbox.io/ (please note that this example doesn't include any CSS
breakpoints for mobile devices). 工作示例 : https : //ox69p34op5.codesandbox.io/ (请注意,此示例不包含移动设备的任何
CSS
断点)。
The video react components make the player width take 100%. 视频反应组件使播放器宽度达到100%。 To fix it try this when rendering your components:
要解决此问题,请在渲染组件时尝试:
export default props => {
return (
<Player
playsInline
poster="/assets/poster.png"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
fluid={false}
/>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.