htmlをheight:100%;にするとなぜか子要素の高さと同じになるのはなぜか。

サイトのファーストビューに動画を流す予定で、スクロールしても動かしたくないので.top-movieにposition: fixed;を指定しています。

スクロールするとmainが現れるようにしたいので、divで囲み、class="without-video-pack"とし、（動画の下に配置したいため、position:relative;を指定し、top:100vh;に指定ています。

html,body,mainが.without-video-packより高さが微妙に低いことに気がつく。
→『あ！親要素にheightを指定してなかったからかな？』

→html、bodyにheight:100%;指定したら、
なぜか.top-movieの高さと同じになってしまう。

調べましたが、どうしても答えにたどり着けず、こちらで質問いたしました。
どなたかご教授いただけるととても助かります！
よろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>HANACO</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/sample1.css">
</head>
<body>
    <div class="header-content">
    <header class="header">
        <nav>
            <ul class="menu">
                <li><a href="work-index.html">Work</a></li>
                <li><a href="about-index.html">About</a></li>
                <li><a href="mailto:info@hotmail.com">Contact</a></li>
            </ul>
        </nav>
        <h1 class="header-logo">
            <a href="/" class="header-logo-main">
                <img src="images/hanako-logo.svg" alt="hanako">
            </a>
        </h1>
    </header>
    </div>
    <div class="top-movie">
      <video id="hanako-movie" src="movies/hanako.mp4" type='video/mp4' loop autoplay preload muted width='100%'>
      </video>
    </div>
    <main class="main">
        <div class="without-video-pack">
        <div class="work-list">
            <ul>
                <li>
                    <article class="work-contents">
                        <a href="works/img1.html" class="work-first-images"><img src="img1.jpg" width="900">
                        <div class="mask">
                            <h3 class="work-title">img1</h3>
                        </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="work-contents">
                        <a href="img2.html" class="work-first-images"><img src="img2.jpg" width="900">
                        <div class="mask">
                            <h3 class="work-title">img2</h3>
                        </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="work-contents">
                        <a href="img3.html" class="work-first-images"><img src="img3.jpg" width="900">
                        <div class="mask">
                            <h3 class="work-title">img3</h3>
                        </div>
                        </a>
                    </article>
                </li>
                <li>
                    <article class="work-contents">
                        <a href="works/img4.html" class="work-first-images"><img src="img4.jpg" width="900">
                        <div class="mask">
                            <h3 class="work-title">img4</h3>
                        </div>
                        </a>
                    </article>
                </li>
            </ul>
        </div>
    </div>
    </main>
    <footer class="footer">©︎花子 Inc. All Rights Reserved.</footer>
</body>

</html>

// -----------
// base
// -----------

html {
	background-color: $background-color;
	width: 100%;
    font-size: 62.5%;
    transition: all 2s ease;
    opacity: 0;
    visibility: hidden;
    &.wf-active {
        opacity: 1;
        visibility: visible;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

// -----------
// main
// -----------

// .main {
// }

// -----------
// video
// -----------

.top-movie {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    background-size: cover;
}

.without-video-pack {
    position: relative;
    top: 100vh;
    z-index: 2;
    opacity: 0;
    transition: all 1s ease;
    background: black;
    padding: 10rem 0 0 0;
}

// -----------
// footer
// -----------

.footer {
	font-family: $font-footer-english;
	color: $highlight-color;
	font-size: 1.5rem;
	padding: 3.5rem;
}