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% - ＆gt; 100vh

Answer 2

尝试检查你的图片网址..

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

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

https://plnkr.co/edit/ulpfMb8op4acZQYTRIgv?p=preview

Answer 3

通过window.onload获取高度

"C10:C19, D10:D19, E10:E19"

为什么我的div高度为0？

3 个答案: