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。我试图删除所有元素的填充和边距，但这不起作用。

更新

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

删除了nav及其子项的边距，并用顶部填充替换它以获得所需的外观。
将main_text的高度更改为80％。

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

Answer 1

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

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

1 个答案: