html - 为什么我的 div 高度为 0？

Question

div 横幅包含我的标题和背景图像。此 div 的高度为零，因此背景图像未显示，但标题显示。

html:

<div class="banner">
        <header class="menu">
            <a href="#" class="logo"><img src="images/logo.png"></a>
            <nav>
                <ul>            
                    <li><a href="#">Início</a></li>
                    <li><a href="#">Categorias</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Membros</a></li>
                </ul> 
            </nav>            
        </header>
    </div>

CSS:

body {
    margin: 0;
    height: 100%;
    font-family: "Montserrat", sans-serif;
}

.banner {
    background: url("../images/banner.jpg");
    height: 70%;
}

Answer 1

body {
    margin: 0;
    height: 100vh;
    font-family: "Montserrat", sans-serif;
}

.banner {
    background: url("../images/banner.jpg");
    height: 70%;
}

尝试改变100% -> 100vh