用视频覆盖 100% 的可用垂直空间？

Question

我正在尝试创建一个页面，其中 header 占据垂直页面的顶部 15%，页脚占据底部 10%，中间的视频占据垂直空间的 rest。

这是我正在使用的代码，但它看起来完全错误。 有什么想法我的错误在这里吗？

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

然后这是我的 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

和页脚。

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