Why my div has height 0?

Question

The div banner contains my header and a background image. This div is getting height zero so the backgroung image is not showing up, but the header does.

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%;
}

Possible duplicate of [Div has no height even if it has content](https://stackoverflow.com/questions/19354845/div-has-no-height-even-if-it-has-content) — lurker, Aug 23 '17 at 00:54

score 0 · Answer 1 · answered Aug 23 '17 at 01:29

0

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

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

try to change 100% -> 100vh

answered Aug 23 '17 at 01:29

kyun

9,710
9
31
66

score 0 · Answer 2 · answered Aug 23 '17 at 03:04

Try to check your image url..

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

score -1 · Answer 3 · answered Aug 23 '17 at 01:24

get height by 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); 
}

Why my div has height 0?

3 Answers3