当我使用“高度：100vh”时身体上方的空白

Question

我有一个基本的 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%。

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

Answer 1

作为一个简单的测试，将

padding: 1px

设置为

body

。如果差距消失，请阅读：http://www.sitepoint.com/web-foundations/collapsing-margins/

Answer 2

我的手机预览图片下方有白色间距。但出于某种原因而不是高度：100vh;我改成了身高：110vh；白色间距消失并适合手机屏幕。

这是csspart

.background_sv{
 position: absolute;
 height: 110vh; 
 width: auto;
}

白色间距图像在这里

height:110vh;

https://imgur.com/a/K8YVkXx

修复后

https://imgur.com/a/1CfyMKs

适合屏幕。

手机很长。宋Xperia 10 ii 也许是因为那个，但我没有在任何其他设备上尝试过