当我使用 "height:100vh" 时，body 上面的白色 space

Question

我有一个基本的 HTML 文档设置，我希望 div 具有视口的高度。但是一旦我将 height:100vh 添加到 .main div 上面就会有一个空隙 body 并且有一个垂直滚动条

这是我的代码。

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 链接到此文档。我尝试删除所有元素的填充和边距，但这不起作用。

更新

耶！找到了解决方案。这是我所做的：

删除了导航的边距 children 并将其替换为顶部填充以获得所需的外观。
已将 main_text 的高度更改为 80%。

如果您有更好的解决方案，请告诉我！

Answer 1

作为一个简单的测试，在 body 上设置 padding: 1px。如果差距消失，请阅读：http://www.sitepoint.com/web-foundations/collapsing-margins/

当我使用 "height:100vh" 时，body 上面的白色 space

White space above the body when I use "height:100vh"

html

css

viewport