HTML, CSS - Two elements equals 100vh

Question

I want to make div (this will be container). In this div I have navbar and another div (this is background img). My container has 100vh. Navbar doesn't have height. Now I want to make "rest of this 100vh" this background div. My main html looks like:

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">

</head>

<body>

<div class="head-container">
    <header>
        <img class="logo" src="css/873438.jpg" alt='logo' />
        <nav>
            <ul class="nav_links">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
            <a class="cta" href="#"><button>Add post</button></a>
    </header>

    <div class="background">


    </div>

</div>
</body>
</html>

And now my CSS file

*{
    margin: 0;
    padding: 0;

}

.head-container{
    height: 100%;
    width: 100%;
}

.background {
    height: 100vh;
    background-color: gray;
}

Background div has 969 px height, like my whole window. I want to make 100vh for whole these 2 divs. What am I doing wrong?

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, May 12 '20 at 19:15

lakshitha madushan · Accepted Answer · 2020-05-12T19:18:04.740

0

We can overlap our divs with position: absolute

.background {
    height: 100vh;
    background-color: gray;
    position: absolute;  /* To over lap the page */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;  /* To put image to background */
}

edited May 12 '20 at 19:18

answered May 12 '20 at 19:11

lakshitha madushan

669
4
7

HTML, CSS - Two elements equals 100vh

1 Answers1