Covering 100% of available vertical space with video? - css

Question

I'm trying to create a page with a header that takes up the top 15% of the vertical page, a footer that takes up the bottom 10%, and a video in the middle that takes up the rest of the vertical space.
This is the code I'm using, but it looks completely wrong. Any ideas what my mistake is here?
import React, { useState } from "react"
import Header from "./header"
import Footer from "./footer"
import VideoFile from "../../resources/my_video.mp4"
const Index = () => {
const [nav, showNav] = useState(false)
return (
<div>
<Header>
</Header >
<video preload='auto' loop autoPlay muted height="400vh" objectFit="cover" display="block" margin="0 auto">
<source src={VideoFile} type="video/mp4" />
</video>
<Footer>
</Footer>
</div>
)
}
export default Index
Then here's my header.
import React, { useState } from "react"
import styled, { createGlobalStyle } from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
const Header = () => {
const [nav, showNav] = useState(false)
return (
<div id='header' style={{ height: '100%', backgroundColor: 'blue', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%', backgroundColor: 'orange' }} >
<img alt='logo' src={logo_image} style={{ maxHeight: '15vh', maxWidth: '100%', width: 'auto !important' }} />
</div>
<div id='title' style={{ backgroundColor: 'lime', textAlign: 'center', color: 'white' }}>
Ellephant
</div>
<div id='menu' style={{ width: '100%', backgroundColor: 'coral' }}>
<MenuIcon nav={nav} onClick={() => showNav(!nav)}>
<div />
<div />
<div />
</MenuIcon>
<MenuLinks nav={nav}>
</MenuLinks>
</div>
</div>
)
}
export default Header
And the footer.
import React from "react"
import fb_icon_image from "../../static/fb_icon.png"
import ig_icon_image from "../../static/ig_icon.png"
import yt_icon_image from "../../static/yt_icon.png"
const Footer = () => {
return (
<div id='footer' style={{ height: '10vh', backgroundColor: 'grey', textAlign: 'center', marginTop: '0.25rem', marginBottom: '0.25rem', position: 'absolute', bottom: 0, left: 50, right: 50 }}>
<img src={fb_icon_image} style={{ height: '90%', display: 'inline-block' }} />
<img src={ig_icon_image} style={{ height: '90%', display: 'inline-block', marginLeft: '1rem', marginRight: '1rem' }} />
<img src={yt_icon_image} style={{ height: '90%', display: 'inline-block' }} />
</div>
)
}
export default Footer