我有一个基本的HTML文档设置，我希望div具有视图端口的高度，但是当我将height:100vh添加到.main div时，主体上方有一个间隙，并且有一个垂直滚动条。
这是我的代码。
HTML：

<div class="main">
    <div class="container">

        <div class="nav">
            <ul>
                <li><a href="index.html" class="active">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

        <div class="main_text">
            <h1>Hey there! I'm <span class="yellow">Gautham SK</span>, a digital designer &amp; web developer.</h1>
        </div>

    </div> <!-- end container -->
</div> <!-- end main -->

CSS：

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}


.container {
    max-width: 1024px;
    padding: 0 20px;
    margin: 0 auto;
}

/* NAVIGATION */

.nav ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
/*  margin-top: 75px;*/
    list-style-type: none;
}

.nav ul li {
    margin-left: 40px;
    list-style: none;
    font-size: 16px;
}

.nav ul li a, .nav ul li a:visited {
    color: #000;
    padding: 5px;
    text-decoration: none;
    transition: 0.2s color;
}

.nav ul li a:hover {
    color: #ffde00;
    transition: 0.2s color;
}

.nav ul li a.active {
    color: #000;
    border-bottom: 5px solid #ffde00;
}

/* MAIN SECTION */

.main {
    background: url("../images/bg.jpg") center center no-repeat;    
    background-size: cover;
}

.main, .main .container {
    height: 100vh;
}

.main_text {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_text h1 {
    font-weight: 400;
    font-size: 45px;
}

span.yellow {
    color: #ffde00;
}

我也有一个normalize.css链接到这个文档。我试图删除所有元素的填充和边距，但这不起作用。

更新

耶！找到解决办法了。我是这么做的：

• 删除了导航和它的子元素的边距，并将其替换为顶部填充，以获得所需的外观。
• 将main_text的高度更改为80%。

如果你有更好的解决办法，告诉我！