Html 为什么我的div高度为0？

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

html:

---

通过window.onload获取高度

<div id="header" class="banner">
    <header id="h" class="menu">
        <a href="#" class="logo"><img src="../img/a.jpg"></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>
<script> 
window.onload =function(){
        var header =document.getElementById('h');
        alert(header.clientHeight); 
}

window.onload=函数（）{
var header=document.getElementById（'h'）；
警报（标题.客户端重量）；
}

---

尝试更改

100%

->

100vh

尝试检查您的图像url

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

.banner {
  background: url("https://www.w3schools.com/cssref/paper.gif");
  height: 70%;
}

---

给出的解决方案中没有一种可能重复适用于测量

html{height:100%}

<div id="header" class="banner">
    <header id="h" class="menu">
        <a href="#" class="logo"><img src="../img/a.jpg"></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>
<script> 
window.onload =function(){
        var header =document.getElementById('h');
        alert(header.clientHeight); 
}

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

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

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

.banner {
  background: url("https://www.w3schools.com/cssref/paper.gif");
  height: 70%;
}